scrollMagic 视差与滚动动画GSAP

scrollMagic（https://github.com/janpaepke/ScrollMagic）是一个页面滚动控制的js库。利用它，可以监听页面的滚动，控制页面元素的样式。
scrollMagic 本身比较简单，只包含2个类：
crollMagic.Controller 一个控制器，用于总体的动画调度 ；
ScrollMagic.Scene 一个或多个具体舞台画布，用于设计具体的CSS变换。


需要注意的是，它本身并没有集成 animation的控制方法，动画的实现，需要引入插件 GSAP 或者是 VelocityJS .所以，实际开发的时候，页面基本会引入三个js：
scrollMagic.js/GSAPAdapter桥接文件 /GSAP库文件本身
例如：

    <script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/ScrollMagic.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.3/plugins/animation.gsap.js"></script>

ScrollMagic wiki文档写得一般，不够倒是有很多的样例。如果你重视用js来控制CSS动画，它是不错的选择，反之，如果你直接想写 CSS3动画， skrollr 可能会是更好的选择。

WIKI地址：
https://github.com/janpaepke/ScrollMagic/wiki/Get-Started-Setup

大量示例：
http://scrollmagic.io/examples/basic/simple_tweening.html


由于 GSAP 在动画效果的应用，你想用 ScrollMagic ，GSAP也得做一番了解。
GSAP （http://greensock.com/） 是一个比较牛逼的动画控制库。

TweenLite 是它核心的最小的基础文件，而 TweenMax 则包含包括 TweenLite 、 CSSPlugin（处理CSS属性变换）, RoundPropsPlugin, BezierPlugin, AttrPlugin（属性变换）, DirectionalRotationPlugin 、EasePack, TimelineLite（多元素序列动画）, and TimelineMax. ，这里的每一个插件，都有它对应的特性，提供了额外的动画控制功能。

所以，如果你介意文件大小，可以自己逐个映入相关的js。GSAP上有大量的其它的动画插件；
如果你想通用的引入动画控制，TweenMax.js基本就可以胜任。


更多说明：http://greensock.com/get-started-js
示例讲解：http://greensock.com/jump-start-js
基本的API说明：