JS整站开发之:JS整屏切换+动画制作神器“TweenMax库”

又一轮福利空降来袭,给这寒冷的冬天注入一股暖流,计划已久的整站分享,今天与大家见面。


之所以录制这套视频,是因为许多VIP会员在工作中遇到了N多困惑:
动画越来越多、控制需求越来越精确,
细微的动画问题无法得到完美的解决,
当动画叠加和流程控制越来越复杂时,
维护和管理各类动画效果就会让人抓狂……


因此从今天起,妙味讲师王允向大家详细介绍一款 “JS动画神器”:TweenMax库
本套视频以整站实例讲解方式,带领大家一步步深入这套 “JS动画神器”,看看它究竟有多神奇!
*本视频实战案例选自妙味VIP会员提问,好学的孩子总能得到更多照顾~♡

本套视频实例演示地址:

http://diagnosite.com/


 


该案例中涉及到的JS库:
1.  jQuery库:用来选取页面中元素,绑定事件;
2.  TweenMax库(http://greensock.com/):用来添加动画,管理动画状态等功能;


说明:
观看人群应具备JQ开发基础,并具备一定CSS3实践经验,如不符合要求,请 >>观看VIP视频库
因此,本套视频不再详细讲解JQ与基础CSS3等样式,而是重点介绍TweenMax库中的重要方法与实战讲解,希望大家掌握完相关方法以后,再跟着视频逐步学习以下内容:
    ☩ 导航条和首屏出场动画
    ☩ 导航条里交互效果,包括3D翻转实现
    ☩ 整屏切换
    ☩ 页面动画计算滚动条滚动距离
    ☩ 拖动滚动条触发页面动画
    ☩ 完善每一屏内的图片翻转
    ☩ 缩小浏览器,做布局转换

    *另外,讲师在录制视频时,多次遭遇机器问题和录制环境问题,因此在剪辑时大家若听到各种不同场景的怪异动静,亦属正常~ ^_^

>>点击这里在线观看VIP会员视频教程



 

第一集:
★ 本套视频由来
★ 演示项目涉及到的交互动画
★ 整屏切换网站技术难点说明
★ 涉及的JS库:jQuery、TweenMax
★ jQuery中动画的局限


第二集:
★ TweenMax的相关方法
★ to()方法实例演示
★ TweenMax的并列写法、依次执行、支持CSS3、延迟时间


第三集:
★ TweenMax延迟时间的动态写法
★ TweenMax暂停依次执行动画
★ TweenMax的反向依次执行动画
★ TweenMax依次动画的回调函数


第四集:
★ TweenMax中的动画状态控制
★ 运动状态切换中的样式控制
★ 运动状态中的时间控制
★ 运动状态中的结果控制
★ 获取动画已执行时间
★ TweenMax中的清除动画
★ TweenMax中的队列执行动画


第五集:
★ 获取动画总时长
★ 获取动画开始到当前状态的时间
★ 获取动画执行完成后的状态
★ 获取当前动画的过去、未来状态
★ 动画运动形式


第六集:
★ 实例动画介绍及HTML结构设置
★ 网站交互动画原理分析
★ 整屏切换原理、结构与样式安排
★ 命名空间、整站JS搭建方案
★ JS设置动态屏高


第七集:
★ 整站导航的动画原理
★ 编写导航动画
★ 首页文字及图片3D翻转动画
★ 结束动画显示滚动条


第八集:
★ 编写导航条交互动画
★ 实现下拉菜单动画
★ 编写3D翻转动画函数


第九集:
★ JS版实现3D翻转菜单动画
★ 吸附导航的实现原理
★ 尺寸变化的导航条布局转换
★ 左侧导航条的实现


第十集:
★ 配置整屏切换动画函数
★ 为多屏跳转添加标识
★ 滚动条距离与分屏动画比例关系分析
★ 
鼠标滚轮方向判断★ 设置滚动时间间隔

第十一集:
★ 分割函数功能模块的好处
★ 滚屏距离计算原理
★ 实现分屏切换
★ 分屏切换与滚动条距离计算原理
★ 推导滚动条公式

第十二集:
★ 完整实现滚动条功能
★ 修复最后一屏滚动条状态
★ 重置页面刷新位置

第十三集:
★ 浏览器窗口变化产生的问题分析
★ 窗口大小变化时动态显示当前屏幕内容
★ 推导公式,实现滚动条内控制分屏页面

第十四集:
★ 初始化滚动条不受控制的原因
★ 解决滚动条初始化问题
★ 鼠标拖拽中途松开智能检测上下滑动功能


第十五集:
★ 滚轮的四种状态分析
★ 滚动条运动到指定位置


第十六至二十三集:
★ 分析导航3D翻转的原理
★ 重新开辟命名空间实现3D翻转细节★ 3D翻转加入主动画中
★ 分析第二屏动画的原理
★ 实现动画具体细节
★ 第二屏动画加入主动画中
★ 分析原理及实现细节
★ 实现第五屏中3D翻转
★ 画图分析实现原理
★ 可视区域<950 固定导航条
★ 可视区>950 导航条依然有3D翻转
★ 可视区域<= 780去掉所有的事件,并进行布局转换


课程咨询QQ:2852509867、2852509868
课程咨询电话:010-57269690
客服在线时间:周一至周五 9:30-18:00 周六至周日 10:00-17:00

请关注微信公众号,了解最新课程安排:

妙味网友
请登录后留言,请登录注册