scroll滚动容器教学（让你的网页动起来）
scroll滚动容器教学（让你的网页动起来）<script src="https://img.aigexing.com//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>//TweenMax//jQuery<script src="https://img.aigexing.comhttps://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>ScrollMagic既可以使用CSS来制作动画，也可以使用GreenSock动画平台（GSAP）进行动画制作。从技术上讲，GreenSock平台是完全可选的，但使用它是完全合理的。GSAP很好，因为它有自己的小框架，有自己的依赖项和插件。如果性能对您来说是一个很大的因素，您可以只选择您需要的
你们是不是曾经见到一些极具动态效果的网站页面？它们既酷炫而且引人入胜。就像这样的：
也许有些觉得这实现起来很难。事实上，如果只用JS来实现的话，确实是要花费一番功夫，而且最终的效果也可能不是那么理想。那么如何快速地实现呢？这里我就给大家介绍一个免费的JS库 - ScrollMagic，通过这个库，我们可以快速实现所有我们想要的效果。
ScrollMagic是一个Jquery插件，可让您像播放控件一样使用滚动条。使用此功能，您可以构建一些非常漂亮的登录页面和网站。
初始设置ScrollMagic需要jQuery。您需要包含Jquery才能使用ScrollMagic:
//jQuery
<script src="https://img.aigexing.comhttps://cdn.bootcss.com/jquery/3.2.1/jquery.slim.min.js"></script>
ScrollMagic既可以使用CSS来制作动画，也可以使用GreenSock动画平台（GSAP）进行动画制作。从技术上讲，GreenSock平台是完全可选的，但使用它是完全合理的。GSAP很好，因为它有自己的小框架，有自己的依赖项和插件。如果性能对您来说是一个很大的因素，您可以只选择您需要的产品。（大家可以去看一下我之前的关于TweenMax快速入门的文章来了解其基本使用方法）。
//TweenMax
<script src="https://img.aigexing.com//cdnjs.cloudflare.com/ajax/libs/gsap/1.14.2/TweenMax.min.js"></script>
接下来，您需要包含ScrollMagic。ScrollMagic还带有一个不错但独立的调试库。我将它包含在演示中，但在生产环境中，不需要包含它。
//ScrollMagic
<script src="https://img.aigexing.com//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.6/ScrollMagic.min.js"></script>
//ScrollMagic调试库
<script src="https://img.aigexing.com//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);
生成效果（网页右边是调试效果）：
当然，这只是一个入门的例子，如果大家想做出更多酷炫的效果的话，可以花点时间好好研究一下。谢谢大家！
