>http://www.htmleaf.com/jQuery/Layout-Interface/201503011442.html
##### 简要教程
ScrollMagic是一款制作各种HTML元素滚动动画效果的js库插件。正如其名字一样，该[jQuery](http://www.htmleaf.com/jQuery/)元素滚动动画库出插件可以制作出各种神奇的滚动动画效果。ScrollMagic动画库的强大之处在于：
* 基于滚动位置执行动画-无论是触发一个动画或同步到滚动条的滚动。
* 可以在指定的滚动位置开始一个元素的动画-无论是无限或有限的循环次数。
* 基于滚动位置切换元素的CLASS样式。
* 可以轻松的添加[网页视觉差效果](http://www.htmleaf.com/jQuery/shijuecha/)。
* 可以创建无限滚动的[瀑布流效果](http://www.htmleaf.com/jQuery/pubuliuchajian/)（通过AJAX调用添加新元素）。
* 可以在指定的滚动位置或滚动到指定的区域时执行回调函数。
ScrollMagic动画库可以和其它js框架集成，插件中建议与[Greensock Animation Platform (GSAP)](http://www.greensock.com/gsap-js/)，GSAP的特点是性能稳定，功能丰富。也可以和轻量级的[VelocityJS](http://velocityjs.org/)框架集成。
ScrollMagic元素滚动动画库的特点有：
* 优化性能
* 轻量级（压缩后只有6KB）
* 灵活可扩展
* 兼容移动手机设备
* 强大的事件管理
* 支持响应式网页设计
* 面向对象的编程方式和链式编程方式
* 代码可读性强
* 支持两个方向的滚动（even different on one page）
* 支持在`div`容器中滚动（一个页面可以支持多个`div`）
* 完善的调试和日志记录功能
### 安装
ScrollMagic元素滚动动画库插件支持git、Bower、nmp和CDN。
git clone git://github.com/janpaepke/ScrollMagic.gitbower install scrollmagicnpm install scrollmagichttp://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，请[查看这里](https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-Using-AMD)。
##### 基本使用方法
基本的ScrollMagic设计模式使用一个控制器，该控制器可以管理一个和多个场景。每一个场景用于定义当容器滚动到指定位置时发生的事件。
// init controllervar controller = new ScrollMagic.Controller(); // create a scenenew 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代码结构，请[查看这里](https://github.com/janpaepke/ScrollMagic/wiki/Getting-Started-:-How-to-use-ScrollMagic)。
### 使用帮助
To get started, check out the available learning resources[in the wiki section](https://github.com/janpaepke/ScrollMagic/wiki).
你可以查看每个例子，每个例子都有代码提示。你也可以查看[ScrollMagic英文版的在线文档](http://janpaepke.github.io/ScrollMagic/docs/index.html)。
### 浏览器兼容
ScrollMagic支持所有的现代浏览器，包括：
Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+
