scrollMagic套件

前言

本篇透過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
})

參數參考

詳細可以看官網的型態跟預設

官網:ScrollMagic Class: Scene

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的方法,有點多,就不一一列舉,只列出我用過的

官網:ScrollMagic Class: Scene

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

By dong

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。