scrollMagic 视差与滚动动画GSAP

最新推荐文章于 2025-06-02 09:16:42 发布

最新推荐文章于 2025-06-02 09:16:42 发布 · 3.5k 阅读

文章标签：

#css3 #animation #scroll

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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文档写得一般，不够倒是有很多的样例。如果你重视用

最低0.47元/天解锁文章