ScrollMagic 與 GSAP 簡介
ScrollMagic：滾動動畫函式庫簡介
ScrollMagic 展示頁面 與 ScrollMagic GitHub 相關連結。
ScrollMagic 為 JavaScirpt 滾動動畫函式庫，透過使用者的操作在當前滾動位置並觸發動畫或同步事件。
ScrollMagic 早期是相依與 jQuery 下的套件。
ScrollMagic 在 jQuery 時期就可引用 GreenSock Animation Platform (GSAP)，可參考 Building Interactive Scrolling Websites with ScrollMagic.js 一文。
另外 jQuery 版相關用法與資源：
相依於 ScrollMagic 的擴充 GSAP (GreenSock Animation Platform)
從 2.0.0 版本開始，將相關的 GSAP 與 jQuery 移除，並從函式庫中獨立出賴件項目。
在 ScrollMagic 之上添加功能的所有內容都被視為插件，最終使 ScrollMagic 成為一個獨立的函式庫 (壓縮了 6KB)！
V2 新舊版用法差異，可參考 scrollmagic_推出ScrollMagic 2.0 一文，寫法上差一些但觀念上差不多。
GSAP 用法可參考 GSAP-3(GreenSock Animation Platform)：綠襪子動畫函式庫教學與筆記文章。
ScrollMagic 的基本使用與概念
在官方文件 Getting Started : How to use ScrollMagic (入門：如何使用 ScrollMagic) 說明：
1.每個滾動容器有一個控制器。
在大多數情況下，只有一個控制器對象，滾動容器是瀏覽器窗口。
但是，您也可以使用 div 元素進行滾動，甚至可以在頁面上包含多個容器。
控制器還定義應滾動的方向（水平或垂直），並負責保持所有場景的更新。
2.場景定義了什麼時候發生，即在哪個滾動位置發生。
它可以觸發動畫，固定元素，更改元素類或您可能需要的任何其他內容。
大意約為 ScrollMagic 主要是透過控制器，將加入的不同場景透過事件來將綁定元素進行動態操作，使用如下：
Defining the Controller (定義控制器)
1 | var controller = new ScrollMagic.Controller(); |
在使用 ScrollMagic 需要先透過 new ScrollMagic.Controller() 宣告一個實體，將控制器實體化，透過控製器才可操作之後的 Scenes (場景)。
Defining Scenes (定義場景)
接著將 ScrollMagic 的 Scenes 場景透過變數定義出來。
1 | var scene = new ScrollMagic.Scene(); |
而 .Scene() 方法中帶入的參數是一個 {} object (物件) 資料，裡面所用的屬性與值都是用來設定場景，這部份可以參考ScrollMagic.Scene 官方文件。
1 2 3 4 | var scene = new ScrollMagic.Scene({ offset: 100, // 滾動 100px 後開始場景 duration: 400 // 將元素固定為 400px 滾動 }) |
Adding Scenes to Controller (加入場景與控制器綁定)
.addScene() 方法，將場景加入控制器綁定
1 2 3 4 5 6 7 | var scene = new ScrollMagic.Scene({ triggerElement: '#pinned-trigger1', // 到達該元素時的開始場景 duration: 400 // 將元素固定為 400px 滾動 }) .setPin('#pinned-element1'); // ScrollMagic 指定元素需要固定 controller.addScene(scene); // 將場景加到 ScrollMagic 控製器綁定 |
.setPin() 效果方法，與 Bootstrap Affix Plugin (affix.js) 原理類似，都是當滾動到窗口高度與指定的元素上，對 css 的 position: fixed; 的切換操作，主要是用來當指定元素由滾動事件觸發後，會動態加上 css 的 position: fixed; 使得指定元素浮動於畫面上。
Bootstrap (v3.4.1) Affix GitHub Link。
程式碼中使用函式 +function ($) {} 特別的方式，可參考 javascript +function () {} (); 解析 · 爵獅 一文。
如果一次需要多個場景，在 controller.addScene() 物件下的 addScene() 方法，可透過參數傳入陣列資料，裡面帶入不同的場景變數傳遞給控制器，如下例：
1 2 3 4 5 | controller.addScene([ scene1, scene2, scene3 ]); |
.addTo() 方法，直接將場景加入控制器
除了告訴控制器要添加哪些場景之外，還可以告訴要添加到某個控制器的場景：
1 2 3 4 5 6 7 8 9 | var scene = new ScrollMagic.Scene({ triggerElement: '#trigger1' }) .addTo(controller); // Add Scene to ScrollMagic Controller var scene2 = new ScrollMagic.Scene({ triggerElement: '#trigger2' }) .addTo(controller); // Add Scene to ScrollMagic Controller |
.addTo() 的方法使用 JavaScript 鏈接 (chain) 的方式撰寫，透過 .addTO() 方法的鏈接方式，可不斷的向 ScrollMagic 控制器加入場景。
ScrollMagic 與 GSAP 的整合與運用
ScrollMagic 與 GSAP 插件
ScrollMagic 與 GSAP 插件文件 (Plugin: GSAP) 與 官方展示頁面
ScrollMagic 的控制器與場景初始設定
大約設定的方式如下例：
1 2 3 4 5 6 7 | let controller = new ScrollMagic.Controller(); let scene = new ScrollMagic.Scene({ triggerElement: '.js-element-className', // 到達該元素時的開始場景 duration: '100%', // 元素固定為 100% triggerHook: 0, // triggerHook（0~1）：用於設置實際觸發元素的位置，默認是0，即與實際元素頂端重合，若為1，則與實際元素底端重合。 offset: '0', // 滾動 200px 後開始場景，用於設置 Trigger 與 TriggerElement的 距離，正值在下，負值在上。 }) |
其他 ScrollMagic 與 GSAP 插件的整合文章：
Sprite 動畫與 ScrollMagic 的使用
ScrollMagic 與 GSAP 插件的整合相關展示如下
相關展示沒規劃自適應版型設計，最好透過另開新視窗操作展示
GSAP ANIMATION PIZZA LANDING PAGE
See the Pen GSAP ANIMATION PIZZA LANDING PAGE by Sandip Dust (@SandipDust) on CodePen.light
Simple ScrollMagic Tutorial
See the Pen Simple ScrollMagic Tutorial by Petr Tichy (@ihatetomatoes) on CodePen.light
Fun With ScrollMagic
See the Pen Fun With ScrollMagic by Blake Tarter (@blaketarter) on CodePen.light
Comments are closed.