>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+
