[jQuery] Animation：ScrollMagic 創造頁面捲動互動效果

ScrollMagic 是一款 jQuery 套件，它能幫助你處理用戶當前滾動的位置。現在網路上看到的滾動的動畫效果，許多是來自 ScrollMagic 的運用。

它讓你可以像使用進度條一樣使用滾動條。如果你想在特定的滾動位置開始一個動畫，並且讓動畫同步滾動條的動作，或者把元素粘在一個特定的滾動位置，那麼這款套件正是你需要的。

使用 ScrollMagic，您可以很容易地把視差效果添加到您的網站中。當用戶到達某個滾動位置時，你可以調用函數，或以任何其他方式來和當前的滾動位置進行交互。( 介紹文：☞ ScrollMagic – 酷斃了！超炫的頁面滾動交互效果 )

Step 1 下載套件

下載套件 ☞ http://scrollmagic.io/

Step 2 核心文件

• GreenSock Animation Platform (GSAP)(使之兼容於各家瀏覽器)
• ScrollMagic.min.js
• debug.addIndicators.min.js ( 使用插件的可視化功能 )

Step 3 使用方法

• 創建一個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 Examples

☞ (官網) ScrollMagic Examples
☞ Sprite動畫與ScrollMagic的使用
☞ 神奇的jquery滾動交互插件ScrollMagic
☞ Building Interactive Scrolling Websites with ScrollMagic.js

---

Reference

☞ 如何使用 skrollr 做出簡易的 Parallax Scrolling 網頁

Source

☞ [轉載]利用TweenMax針對HTML頁面製作動畫
☞ 15 JQuery Plugin One Page Scroll With Animations