ScrollMagic
- ScrollMagic是一个滚动视差插件
- ScrollMagic本身比较简单,只包含2个类:
- ScrollMagic.Controller 一个控制器类,用于总体的调度
- ScrollMagic.Scene 一个场景类,用于设计具体的变换
- 需要注意的是,它本身并没有集成animation的控制方法,动画的实现需要引入插件GSAP或者Velocity
GSAP
GSAP是一个从flash时代一直发展到今天的专业动画库
-
GSAP优点
- 速度快
- 轻量与模块化
- 没有依赖
- 灵活控制
-
GSAP版本: TweenLite,TimelineLite,TimelineMax,TweenMax,建议在开发中使用TweenMax这个全功能的js文件,它包括了GreenSock动画平台的所有核心的功能
//从当前位置到指定位置 TweenMax.to(); TweenMax.staggerTo(); //从指定位置到当前位置 TweenMax.from(); TweenMax.staggerFrom(); //从第一个指定的位置到第二个指定的位置 TweenMax.fromTo(); TweenMax.staggerFromTo();
Velocity
- Velocity 是一个简单易用,性能极高,功能丰富的轻量级JS动画库
- 它能和 jQuery/Zepto 完美协作,并和$.animate()有相同的API,但它不依赖jQuery,可以单独使用,Velocity不仅包含了$.animate() 的全部功能,还拥有:颜色动画,转换动画(transforms),循环,缓动,SVG动画,和滚动动画等特色功能
- Velocity基本使用
- 导入Velocity文件
- 利用Velocity实现动画
- 配合jQuery使用: 必须先导入jQuery,再导入velocity
ScrollMagic
- 使用ScrollMagic,可以容易地让动画和滚动条的动作同步
- 使用ScrollMagic,可以容易地把视差效果添加到网站中
- ScrollMagic特点
- 优化性能
- 轻量级(压缩后只有6kb)
- 灵活可扩展
- 兼容移动设备
- 强大的事件管理
- 支持响应式网页设计
- 面向对象的编程方式和链式编程方式
- 代码可读性强
- 支持两个方向的滚动
- 支持在div容器中滚动
- 完善的调试和日记记录功能
- 如果需要结合Velocity来使用,那么在创建场景的时候就不能指定有效范围
