一个元素,动态的往往比静态的更能吸引人们的注意力,由此推之,一个操作界面,活泼的动效交互反馈将会给用户带来更好的操作体验和感知。小到APP的Loading动画,大到各大网站炫酷的H5运营页的展现,可以说H5动效已经逐渐渗透到人们的生活的各个领域,并且成为了一名WEB前端开发工程师的加分技能。
HTML5炫酷动效案例视频教程由专业教师团队潜心研发、匠心打造,借助腾讯课堂优质的在线教育平台,为H5动效的学习者提供最精品的课程和高品质的在线授课体验。
HTML5炫酷动效案例在线视频教程,7月16日开讲,每周一、三、五、日,20:00—22:00与大家准时相约。首先我们先感受一下第一周的课程都涉及哪些精彩的内容:
第一节:JS实战“炫酷首页”之整体框架搭建
1、布局(HTML+CSS)
划分区域、CSS重置样式与公共样式、CSS划分
2、适配(JS+CSS)
获取浏览器尺寸、onresize
3、封装常用方法
4、滚轮切屏与点击切屏
DOMMouseScroll、mousewheel、滚轮触发优化处理、toMove方法封装
第二节:JS实战“炫酷首页”之3D翻牌与网格算法
1.3D属性(CSS3)
Perspective、backface-visibility、transform:rotateY
2.JSON数据
基本格式、动态创建节点
3.网格计算
For循环操作、坐标分配
第三节:JS实战“炫酷首页”之JS万花筒与canvas曲线
1.万花筒特效(JS)
方向检测、图片替换操作
2.canvas基本操作(H5)
绘图环境、圆形绘制
3.canvas曲线运动
动画实现原理、数学换算
第四节:JS实战“炫酷首页”之视觉差与加载动画
1.视觉差特效(JS+CSS3)
入场动画、出场动画、整体切换组合
2.音频设置(H5)
Audio标签基本属性、Audio标签方法与事件
3、加载动画
New image()对象、进入首页动效
以上内容只是第一周的视频教程介绍,为期20周的在线课程将会有更多精彩的内容等待大家去探寻。
HTML5炫酷动效案例虽是免费的前端学习教程,但却有专业的师资助力;虽是在线视频授课,却能享受线上+线下解答的超强责任心团队贴心服务。无论是程序小白还是有经验的前端程序猿或程序媛,都能左右采获,受益匪浅。