內容目錄
前言
本篇透過Scroll Magic的場景控制效果，達到下拉時背景不動，而畫面上的HTML元件產生變化。以及GreenSock的路徑控制動畫，呈現指定HTML元件隨著想要的路徑進行移動。將兩者結合就是一個不動的場景，並且下拉時依照路徑移動的動畫效果
官方範例：Bezier Path Animation – Examples – ScrollMagic
Scroll Magic
安裝
NPM
npm install scrollmagic
CDN
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
測試執行
先簡單進行環境架設測試，設定3個CSS跟HTML，簡單說明一下，設定一個透明的紅色區塊，當場景到紅色區塊的時候，寬度從0~100%，透明度0~100%，加上transition呈現一個緩慢出現的效果
CSS
.block{
width: 100%;
height: 1000px;
}
.redBlock{
width: 0;
height: 200px;
background: red;
font-size: 100px;
color: white;
display: flex;
justify-content: center;
align-items: center;
opacity: 0;
transition: 1s;
margin: 0 auto;
}
.redBlock.show{
opacity: 1;
width: 100%;
}
HTML
<div class="block"></div>
<div class="redBlock">Red</div>
<div class="block"></div>
JS
var controller = new ScrollMagic.Controller();
var scene = new ScrollMagic.Scene({
triggerElement: ".redBlock"
})
.setClassToggle(".redBlock", "show")
.addTo(controller);
名詞介紹
controller(控制器)：控制滾動容器，一個控制器控制一個容器
scroll container(滾動容器)：大多使用瀏覽器視窗當容器，也可以選擇div作為容器。div作為容器，同個頁面就可以多個容器
scene(場景)：一個場景代表什麼時間要發生什麼，也就是當容器下拉到場景位置，就會觸發設定的動畫，固定元素，更改元素，任何你想要的內容
認識控制器，設定場景
控制器
將套件中的控制器實體化即可，等等會呼叫他
var controller = new ScrollMagic.Controller();
設定場景
還是將套件中的場景實體化，還可以帶一個物件參數進去
var scene = new ScrollMagic.Scene()
帶參數範例
var scene = new ScrollMagic.Scene({
offset: 100, // start scene after scrolling for 100px
duration: 400 // pin the element for 400px of scrolling
})
參數參考
詳細可以看官網的型態跟預設
| duration | 場景持續時間。設定越多，下拉越久才能離開 |
| offset | 觸發位置的偏移值，也就是超過場景開頭的位置多少，才開始你設定的動畫。跟triggerElement(設定開頭)有關 |
| triggerElement | 定義場景開始的選擇器或 DOM 對象。這個是設定你場景的開頭要依照誰為基準，他的值要給他一個DOM，比如是class有’aa’的HTML為開頭，那就直接給triggerElement:’.aa’ |
| triggerHook | 值是一個介於 0 和 1 之間的數字，滾動視窗觸(瀏覽器位置)發場景的位置，1是開頭，0是結尾，0.5是中間 |
| reverse | 向上滾動時，場景是否應該反轉？ |
| loglevel |
場景加入控制器
上面場景跟控制器都設定好了，接下來就是將場景加入控制器，基本上就可以完成了。有兩種方式可以把兩者合併，選一種就好
場景方法
告訴場景加入某個控制器，使用.addto( 控制器 )
var scene = new ScrollMagic.Scene()
.addTo(controller);
控制器方法
告訴控制器某個場景要加入你，使用.addScene( [場景1,場景2] )
controller.addScene([
scene1,
scene2,
scene3
]);
場景加入變動元素的方法
就是加入動畫，或是一些CSS的方法，有點多，就不一一列舉，只列出我用過的
| setPin() | 設定一個不會動的背景 |
| setClassToggle() | 當場景觸發時，把某個CSS丟給某個HTML，離開場景後會刪除CSS元素參數1是Dom的位置參數2是CSS元素.setClassToggle ( “.classChange” , “class1 class2 class3” ) ; |
| setTween() | 這個沒寫在上面官網範例，用來連接，GreenSock動畫用 |
| on(“enter”, function () {}) | on的enter事件，當進入場景後觸發，前後進入都會處發。※官網下面有提到一些事件(Events)的用法，主要是當場景某些情況發生，你要處理一些JS邏輯用到 |
結論
剩下就是一些變化的部分，掌握設定場景跟控制器的方式之後，接下來只要看一些官網的範例，就知道怎麼做了，至於要加入GreenSock，就先將後半部的入GreenSock操作學習熟練在來設置
官網的範例：Animating with GSAP – Examples – ScrollMagic