WEB实战原生JS开发
WEB前端的小伙伴们,今天咱们来点真格儿的,为大家呈现一个超级干货课程,看看一个原生JS整站项目,是如何一步步开发完成的.
在这个实战案例中,讲师精心设计了最实用炫酷的WEB开发知识点,集结了WEB前端交互最前沿知识点,全方位覆盖了一个由原生JS打造系统化WEB动画交互的方方面面,是一套由头至尾、逐行编写完成的整体项目开发,令人期待!!
在线预览地址: http://v.miaov.com/project/
本课程的应用范围:
这是一个实战课程,属于市场极度稀缺的课程,同时又是一个完整的实战开发课程,这意味着:当学完以后,你直接可以将它作为 你个人的新项目实战作品,为你的技能加分、提高求职竞争力!
这是一个JS复杂的实战交互案例,许多企业需要这样的应用,来为产品增添丰富的表现力,因此,如果你愿意在学完以后提交这样的项目作品,来证实你的开发实力,你便可以受到更多企业关注,并获得 丰厚的项目外单 回报,实现你的个人微创业!
整站特点:
采用原生 JavaScript + CSS3 打造
音乐 video 的 HTML5 技术
加载动画与加载方案的实施
整站尺寸的适配,迎合主流分辨率
鼠标滚轮 + 按钮 + 菜单切屏效果
融入视觉差效果,感受入场与出场动画
整站涉及知识点:
JavaScript:
滚轮操作(onmousewheel DOMMouseScroll)
获取class( getByClass封装 )
可视区宽高获取(clientWidth)
统一的前缀设置(setStyle)
入场与出场的设置(inAn outAn)
曲线算法(sin与单位圆)
数据的创建({}与createElement)
loading效果(new Image)
CSS3事件(transitionend)
HTML5:
canvas操作(getContext('2d'))
音乐播放( play pause )
CSS3:
keyframes animation transform rotate scale
translate transition perspective preserve-3d等
课程大纲
1.酷站VoxelAir特效总览及header布局特效实现
2.滚屏及内容区居中布局样式实现
3.滚轮实现滚屏(事件兼容、滚动函数节流 )
4.animate实现机器人动画&动态生成hover遮罩图片列表
5.3d切换轮播图-3d左右切换动画分析及实现
6.3d切换轮播图- js实现切换效果
7.3d卡片hover翻转效果、动态创建卡片
8.Spider-Man小图拼接成大图十字特效MouseOver(一)
9.Spider-Man小图合成大图十字特效MouseLeave(二)
10.三角运动图像函数,三角曲线轨迹运动Demo
11.canvas多物体运动
12.气泡曲线运动特效
13.滚屏入场出场动画开发 (一)
14.滚屏入场出场动画开发(二)
15.图片预加载及loading动画
课程价格:680元 Vip会员价格:99元
自助报名:妙味官网 > 远程课 > WEB实战原生JS开发 > 购买课程
远程课地址:http://2017.miaov.com/study
咨询方式:
QQ:2852509866、2852509867、2852509868
TEL:010-57269690
在线时间:周一至周五 9 : 30-18 : 00 周六至周日 10 : 00-17 : 00
打开微信扫描二维码,关注妙味课堂最新动态:

请登录后留言,请登录或注册