ScrollMagic是一款制作各种HTML元素滚动动画效果的js库插件。正如其名字一样,该jQuery元素滚动动画库出插件可以制作出各种神奇的滚动动画效果。ScrollMagic动画库的强大之处在于:

  • 基于滚动位置执行动画-无论是触发一个动画或同步到滚动条的滚动。
  • 可以在指定的滚动位置开始一个元素的动画-无论是无限或有限的循环次数。
  • 基于滚动位置切换元素的CLASS样式。
  • 可以轻松的添加网页视觉差效果
  • 可以创建无限滚动的瀑布流效果(通过AJAX调用添加新元素)。
  • 可以在指定的滚动位置或滚动到指定的区域时执行回调函数。

ScrollMagic动画库可以和其它js框架集成,插件中建议与Greensock Animation Platform (GSAP),GSAP的特点是性能稳定,功能丰富。也可以和轻量级的VelocityJS框架集成。

ScrollMagic元素滚动动画库的特点有:

  • 优化性能
  • 轻量级(压缩后只有6KB)
  • 灵活可扩展
  • 兼容移动手机设备
  • 强大的事件管理
  • 支持响应式网页设计
  • 面向对象的编程方式和链式编程方式
  • 代码可读性强
  • 支持两个方向的滚动(even different on one page)
  • 支持在div容器中滚动(一个页面可以支持多个div
  • 完善的调试和日志记录功能

安装

ScrollMagic元素滚动动画库插件支持git、Bower、nmp和CDN。

git clone git://github.com/janpaepke/ScrollMagic.git
bower install scrollmagic
npm install scrollmagic
http://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.0/ScrollMagic.min.js                
              

使用方法

在页面中引入ScrollMagic.js文件。

<script src="js/scrollmagic/uncompressed/ScrollMagic.js"></script>                
              

如果你使用的是min版本的ScrollMagic文件,记住logging功能在min版本的js文件中已经被移除。

要使用插件的可视化功能,引入debug.addIndicators.js文件。

<script src="js/scrollmagic/uncompressed/plugins/debug.addIndicators.js"></script>                
              

如果你使用AMD,请查看这里

基本使用方法

基本的ScrollMagic设计模式使用一个控制器,该控制器可以管理一个和多个场景。每一个场景用于定义当容器滚动到指定位置时发生的事件。

// init controller
var controller = new ScrollMagic.Controller();

// create a scene
new ScrollMagic.Scene({
        duration: 100,  // the scne should last for a scroll distance of 100px
        offset: 50      // start this scene after scrolling for 50px
    })
    .setPin("#my-sticky-element") // pins the element for the the scene's duration
    .addTo(controller); // assign the scene to the controller                
              

要了解更多的ScrollMagic的js代码结构,请查看这里

使用帮助

To get started, check out the available learning resources in the wiki section.

你可以查看每个例子,每个例子都有代码提示。你也可以查看ScrollMagic英文版的在线文档

浏览器兼容

ScrollMagic支持所有的现代浏览器,包括:

Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+