ScrollMagic 的兩個類別

Controller 控制器、Scene 場景。

SM 將捲軸容器設為控制器後，以 flash 來比喻， 該 "Controller 控制器" 容器的 height (or width 如果橫向捲動) 可看作舞台時間軸的影格數； Scene 好比時間軸的元件關鍵影格； 視窗可視範圍好比 flash 舞台。

而元件何時出現在舞台上？

Flash 中把元件拉到舞台，時間軸就會自動增加該元件的圖層，然後我們可以設關鍵影格、在舞台指示元件變化...。

在 SM 中的元件就是 "Scene"，他有一些屬性和值可設定，例如第幾格開始出現(px)、運行到第幾格結束(px)...

那動畫的變化呢？是要先將動畫的變化寫好，指定給 dom。 Sence 再用 chain 加入來控制到 dom。

（可見 Sence 綁定了容器位置和 dom 物件，所以後面若有重複相同過程，可能 HTML 就需要重複 dom 和設定新的 Scene。）

寫動畫變化和組成安排一組動畫 (TimelineLite)，SM 推薦一些好用的 Javascript Libary 例如 SM 文件建議的 GASP。

控制器: ScrollMagic.Controller

http://scrollmagic.io/docs/ScrollMagic.Controller.html 設定一個控制器。

// 語法：
new ScrollMagic.Controller(options)
// "options" 為 "設定項目"

// 基本初始化：設變數 controller 是一個控制器
var controller = new ScrollMagic.Controller();

// 設變數 controller 是一個包含 "設定項目"的控制器。全部 "設定項目" 註解：

var controller = new ScrollMagic.Controller({
    container: "#myContainer", 
    // 控制器容器，dom 選擇器。不寫預設是 "window"
    vertical: true, 
    // 捲動方向
    loglevel: 3, 
    // debug / ？
    globalSceneOptions: {}, 
    // 全域場景項目設定s...
    refreshInterval: 0,
    // 默認情況下，某些更改不會調用事件，像更改容器大小、移動場景觸發器元素。
    // 這個間隔，輪詢這些參數來觸發必要的事件。 
    // 如果不是使用客製容器、觸發元素、或使用靜態佈局，其觸發元素的位置不會變，您可以將其設置為0禁用間隔檢查 並提高性能。
});

場景: ScrollMagic.Scene

http://scrollmagic.io/docs/ScrollMagic.Scene.html 設定一個場景。

// 語法
new ScrollMagic.Scene(options)
// options 就是參數，可以隨時更新。

除了這裡單獨設置場景的 options，也可以從控制器的 globalSceneOptions 設定全域的。 當場景被添加到控制器時，Scene 的設定將被 globalSceneOptions 覆蓋。

// 建立一個標準場景，並將它加入控制器
new ScrollMagic.Scene()
        .addTo(controller);

// 建立一個有 "設定項目" 的場景 並指定一個 "handler 處理程序" 給它。全部 "設定項目" 註解：
var scene = new ScrollMagic.Scene({
        duration: 100, 
        // 場景的長度，px，場景停止執行點、debug 的 "end"。
        // 如果 0, 當到達 scene start point，tween 會自動播放；pin 則被固定在 start position。 
        // 也可用 function (見文件 Scene.duration() )
        offset: 200, 
        // 動畫相對場景頭部的偏移值。沒定義 triggerElement， 則為從頁面開始處的整個捲軸滾動距離。
        triggerElement: "#id", 
        // 定義場景起始處(範圍、啟動時機)，未定義則場景將從頁面起始處開始（除非設置了偏移量）。
        triggerHook: "onEnter", 
        // 定義動畫觸發處，相對於視口的位置：0 ~ 1 之間的數字，也可用關鍵字 (e.g. "onEnter" => 1 )。
        // 進入場景後，什麼東西何時開始進行，相當場景內、相對視口的時間軸。
        reverse: false, 
        // 當捲動相反時是否反向播放
        loglevel: 2 
        // 除錯用的, 在最小化的 ScrollMagic 版本中無法使用。
});