为了账号安全,请及时绑定邮箱和手机立即绑定
简介:七夕邻近,才子佳人们又要开始约会了,为了心爱的她献上一份不一样的浪漫。本课程中使用面向接口的编程方式,采用H5+JS+CSS3的混合使用实现整个功能。课程当中总共分为3个主题场景图,多个精灵图以及雪碧图,实现了静与动的完美结合,并且由浅入深的将整个案例拆分讲解。

1章 效果预览与介绍

本章展示整个课程的效果以及课程中的一些注意点
  1. 1-1 课程简介 (02:11)
  2. 1-2 效果介绍 (04:16)
  3. 1-3 编程节奏 (02:38)

2章 页面的搭建与切换

本章讲解了整个效果的结构搭建以及背景图的滚动切换效果,并介绍如何进行代码的封装。
  1. 2-1 页面的横向布局
  2. 2-2 页面之间的卷滚切换效果
  3. 2-3 页面切换部分的代码封装

3章 小男孩的动作的分解

本章讲解如何实现自适应布局,小男孩整个流程的动作拆解以及运动轨迹的处理。
  1. 3-1 布局的自适应动态调整
  2. 3-2 精灵动画的实现
  3. 3-3 走路的实现
  4. 3-4 运动的状态控制
  5. 3-5 路径动画的处理

4章 流程的编写与封装

本章讲解了异步编程是怎么回事,视觉差效果又是怎么回事。
  1. 4-1 异步编程的处理
  2. 4-2 小男孩部分代码的封装
  3. 4-3 页面与人物之间形成的视觉差效果

5章 主题页面一

本章主要是对第一副图中动画的讲解,太阳和云分别是如何实现的。
  1. 5-1 太阳动画效果
  2. 5-2 云动画效果

6章 主题页面二

本章主要是对第二副图中动画的讲解,页面是如何布局,开关门的效果如何实现,人物坐标如何改变,以及灯光和小鸟是如何实现的。
  1. 6-1 页面布局
  2. 6-2 开门关门效果的实现
  3. 6-3 灯光效果
  4. 6-4 人物进出商店的坐标计算
  5. 6-5 等待取花
  6. 6-6 鸟动画的实现

7章 主题页面三

本章主要是对第三副图中动画的讲解,页面如何布局,星星的闪动和河水的流动是怎么实现的,人物的运动轨迹如何处理,转身的动作又是怎么回事,还有logo的晃动以及最后唯美的飘花都是怎么实现的。
  1. 7-1 页面的布局
  2. 7-2 星星与水波
  3. 7-3 运动的轨迹处理
  4. 7-4 转身与logo效果
  5. 7-5 飘花效果的实现

8章 背景音乐

本章讲解了如何使用H5中的audio实现整个课程中的音乐效果。
  1. 8-1 HTML5 audio

9章 最终效果

此章为本课程的最后一章,讲解了整个案例效果中的一些注意点及效果的展示
  1. 9-1 最终效果与总结
  2. 9-2 补充内容雪碧图的自适应缩放
课程须知
本课程为高级案例课程,其中所用的大部分知识点不做深入剖析,只讲解如何使用,部分代码需要由你自己填充。 需要具备如下知识: 1、HTML4、HTML5 2、CSS2、CSS3 3、JavaScript、jQuery 4、面向对象思想
老师告诉你能学到什么?
1、如何实现页面的无缝滚动 2、如何实现视觉差效果 3、异步编程处理 4、CSS3动画过渡 5、JS动画实现 6、H5的音乐效果
意见反馈 常见问题 APP下载
官方微信
hv128