你们是不是曾经见到一些极具动态效果的网站页面？它们既酷炫而且引人入胜。就像这样的：

也许有些觉得这实现起来很难。事实上，如果只用JS来实现的话，确实是要花费一番功夫，而且最终的效果也可能不是那么理想。那么如何快速地实现呢？这里我就给大家介绍一个免费的JS库 - ScrollMagic，通过这个库，我们可以快速实现所有我们想要的效果。

ScrollMagic是一个jQuery插件，可让您像播放控件一样使用滚动条。使用此功能，您可以构建一些非常漂亮的登录页面和网站。

初始设置

ScrollMagic需要jQuery。您需要包含Jquery才能使用ScrollMagic:

//jQuery

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>

ScrollMagic既可以使用CSS来制作动画，也可以使用GreenSock动画平台（GSAP）进行动画制作。从技术上讲，GreenSock平台是完全可选的，但使用它是完全合理的。GSAP很好，因为它有自己的小框架，有自己的依赖项和插件。如果性能对您来说是一个很大的因素，您可以只选择您需要的产品。（大家可以去看一下我之前的关于TweenMax快速入门的文章来了解其基本使用方法）。

//TweenMax

<script src="//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>

接下来，您需要包含ScrollMagic。ScrollMagic还带有一个不错但独立的调试库。我将它包含在演示中，但在生产环境中，不需要包含它。

//ScrollMagic

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>

//ScrollMagic调试库

<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/plugins/debug.addIndicators.min.js"></script>

使用ScrollMagic的一般步骤如下：

创建ScrollMagic控制器（并选择常规选项）

创建动画对象（并选择动画选项）

创建一个场景对象（并选择场景选项）

将我们的动画对象添加到场景对象将场景对象添加到ScrollMagic控制器

下面我会以一个简单的例子来介绍ScrollMagic。

最开始建好静态页面：

通过Section分为上中下三部分，每部分的颜色开始是一样的。中间用白色分割线分隔开来。其中第二部分有文字，第三部分有图片。

效果如下:

1.首先，创建好ScrollMagic对象，用于启动ScrollMagic控制器：

var scrollMagicController = new ScrollMagic.Controller();

2.然后，创建我们需要的动画对象，这里，我通过GSAP工具创建了四个动画对象：

第一个：

var t1 = TweenMax.to('.section1', 0.8, {backgroundColor: '#37C6C0',height: '10vh'});

此动画用于变换第一部分的颜色和高度。

第二个：

var t2a = new TimelineLite();

t2a.to('.section2', 0.6, {backgroundColor: '#37C6C0'});

t2a.staggerFrom('.section2 .title-wrapper span', 0.4, {x: -100,opacity: 0}, 0.2);

这里用的是TimelineLite工具，用于创建连续动画对象。此动画用于变换第二部分的颜色，以及加入文字的渐入效果。

第三个：

var t2b = TweenMax.to('.section2', 0.6, {backgroundColor: '#011935'});

当滚动到第二部分快结束时，用于改变第二部分的背景颜色。

第四个：

var t3 = new TimelineLite();

t3.to('.section3', 0.6, {backgroundColor: '#011935'});

t3.staggerFrom('.section3 img', 0.6, {y:-100,opacity:0},0.2);

通过TimelineLite创建连续动画。此动画用于改变第三部分的背景颜色以及加入图片的渐入效果。

3.新建ScrollMagic场景对象

说明：

triggerElement：触发元素，即当滚动条Trigger滚动到该元素时，触发动画

offset：用于设置Trigger与TriggerElement的距离，正值在下，负值在上。比如：offset:100 指的是Tigger在该触发元素的下面100px的位置

triggerHook（0~1）：用于设置实际触发元素的位置，默认是0，即与实际元素顶端重合，若为1，则与实际元素底端重合。

addIndicators：用于调试使用。

最后一定要加入我们创建的ScrollMagic控制器：

addTo(scrollMagicController);

根据四个动画对象，我创建了四个场景：

//新建场景对象

var sceneForSection1 = new ScrollMagic.Scene({

triggerElement: '.section1',

offset: 500

})

.setTween(t1)

.addIndicators({

name: 'indicator0',

colorTigger: 'white',

colorStart: 'white',

colorEnd: 'white'

})

.addTo(scrollMagicController);

var sceneForSection2a = new ScrollMagic.Scene({

triggerElement: '.section2',

//duration: 500,

triggerHook: 0.2,

offset: -100 /* offset the trigger 100px below #scene's top */

})

.setTween(t2a)

.addIndicators({

name: 'indicator2a',

colorTigger: 'white',

colorStart: 'white',

colorEnd: 'white'

})

.addTo(scrollMagicController);

var sceneForSection2b = new ScrollMagic.Scene({

triggerElement: '.section2',

//duration: 500,

triggerHook: 0.8,

offset: 800 /* offset the trigger 800px over #scene's top */

})

.setTween(t2b)

.addIndicators({

name: 'indicator2b',

colorTigger: 'white',

colorStart: 'white',

colorEnd: 'white'

})

.addTo(scrollMagicController);

var sceneForSection3 = new ScrollMagic.Scene({

triggerElement: '.section3',

//duration: 500,

triggerHook: 0.8,

offset: -100 /* offset the trigger 100px below #scene's top */

})

.addIndicators({

name: 'indicator3',

colorTigger: 'white',

colorStart: 'white',

colorEnd: 'white'

})

.setTween(t3)

.addTo(scrollMagicController);

生成效果（网页右边是调试效果）：

当然，这只是一个入门的例子，如果大家想做出更多酷炫的效果的话，可以花点时间好好研究一下。谢谢大家！