scrollMagic 视差与滚动动画GSAP

最新推荐文章于 2025-09-13 09:12:26 发布

最新推荐文章于 2025-09-13 09:12:26 发布 · 3.5k 阅读

文章标签：

#css3 #animation #scroll

JavaScript 专栏收录该内容

117 篇文章

订阅专栏

本文介绍了ScrollMagic，一个JavaScript库，用于页面滚动时控制元素的动画。ScrollMagic包括Controller和Scene两个类，但不内置动画功能，需要结合GSAP或VelocityJS。GSAP是一个强大的动画库，提供了TweenLite和TweenMax等组件，适用于复杂的CSS属性变换和序列动画。要使用ScrollMagic，你需要理解GSAP的基本API，并根据需求引入相关插件。

部署运行你感兴趣的模型镜像

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说明：

[img]http://dl2.iteye.com/upload/attachment/0108/7206/3aa939e8-a8b8-3d58-925e-3642ed0959ec.png[/img]

您可能感兴趣的与本文相关的镜像