滾動魔法是如何工作的?
ScrollMagic的主要設計模式是一個控制器[1]，它附帶了大量場景[2]
1.每個滾動容器都有一個控制器。在大多數情況下，只有一個控制器對象，滾動容器是瀏覽器窗口。但您也可以使用DIV元素來滾動頁面，甚至在頁面上有多個容器。控制器還定義了應該滾動的方向(水平或垂直)，並負責保持所有場景的更新。
2.場景定義了什么時候應該發生什么，意思是在哪個滾動位置。它可以觸發動畫、鎖定一個元素、更改元素類或其他任何您想要的東西。
定義控制器：
如上所述，在大多數情況下，滾動容器是瀏覽器窗口。要使用默認設置創建一個ScrollMagic控制器，我們使用main ScrollMagic. controller()類。我們為它創建一個新實例並將其分配給一個變量，以便以后可以引用它:
//初始化控制器 var controller = new ScrollMagic.Controller(); //選擇設置 var controller = new ScrollMagic.Controller({container: "#myContainer", loglevel: 3});
控制方法
添加一個或多個場景控制器
語法1：ddScene(newScene) →{控制器} 語法2： Scene.addTo(controller)
返回：父對象的鏈接。｛控制器｝
示例：
//使用之前定義的場景
controller.addScene(scene);
//新創建的場景
controller.addScene(new ScrollMagic.Scene({duration : 0}));
//添加多個場景
controller.addScene([scene, scene2, new ScrollMagic.Scene({duration : 0})]);
清空控制器所有場景
語法1：清空｛resetScene｝ > {空}
返回：零設置處理程序變量｛空｝
示例:
//沒有重置場景
controller = controller.destroy();
//清空后場景
controller = controller.destroy(true);
刪除一個或多個(場景) > {控制器}
語法1： removeScene(場景) > {控制器}
語法2： Scene.remove().
返回：父對象連接。｛控制器｝
示例：
//從控制器中移除一個場景
controller.removeScene(scene);
//從控制器中刪除多個場景
controller.removeScene([scene1,scene2,scene3]);
滾動到數字滾動抵消，DOM元素，一個場景的開始滾動或提供另一種方法，垂直控制器將改變頂部滾動抵消和水平應用他將改變左偏移量
語法：scrollTo(scrollTaget additionalparameter) > {控制器}
返回：父對象鏈接。｛控制器｝
示例：
//滾動到偏移量100
controller.scrollerTo(100);
//滾動到DOM元素
controll.scrollTo("#abchor");
//滾動到場景的開頭
var scene = new ScrollMagic.Scene({offset: 200});
controller.scrollTo(scene);
//定義一個新的滾動位置修改函數(jQuery動畫代替跳轉)
controller.scrollTo(function (newScrollPos) {
$("html, body").animate({ scrollTop:newScrollPos});
});
controller.scrollTo(100);// 像往常一樣調用，但是將使用新函數
//定義一個帶有附加參數的新滾動函數
controller.scrollTo(function(newScrollPos,message){
console.log(message);
$(this).animate({scrollTo:newScrollPos});
});
//像往常一樣調用，但是為定義的自定義函數提供額外的參數
controller.scrollTo(100,"my message");
//使用包含多個變量的附加參數定義一個新的滾動函數
controller.scrollTo(function (newScrollPos, options) {
someGlobalVar = options.a + options.b;
$(this).animate({scrollTop: newScrllPos});
});
//像往常一樣調用，但是提供一個包含多個選項的額外參數
cintroll.scrollTo(100,{a:1,b:2});
//定義一個新的滾動函數，並提供一個回調作為附加參數
controller.scrollTo(function (newScrollPos, callback) {
$(this).animate({scrollTop: newScrollPos}, 400, "swing", callback); });
//像往常一樣調用，但是提供一個額外的參數，在前面定義的自定義滾動函數中用作回調
controller.scrollTo(100,function(){
console.log("scroll has finished");
});
更新（立即） > {控制器}
更新控制器參數並調用updateScene在每一個場景,這是連接到控制器。
看到 Controller.updateScene()為更多的信息關於這意味着什么。
在大多數情況下你不需要這個功能,因為它叫不斷,每當ScrollMagic檢測狀態變化事件,比如調整或滾動。
唯一申請ScrollMagic失敗時該方法檢測這些事件。
與一些外部滾動庫一個應用程序(如iScroll)移動內部容器實際上負偏移量而不是滾動。在這種情況下,更新控制器需要被稱為只要孩子容器的位置發生變化。
對於這種情況也將需要提供一個自定義函數來計算正確的滾動的位置。看到 Controller.scrollPos()獲取詳細信息。
語法： Controller.updateScene()
返回：父對象鏈接。｛控制器｝
示例：
//在下一個周期更新控制器(由於消除了冗余更新，節省了性能)
controller.Update()；
//立即更新控制器
controller.Update(true)；
updateScene(場景, 立即) →{控制器}
更新一個或多個場景(s)根據容器的滾動的位置。
這是等價的 Scene.update().
更新方法計算場景的開始和結束位置(基於觸發元素,引發鈎、持續時間和抵消),檢查它對當前滾動容器的位置。
然后相應地更新當前場景狀態(或什么也不做,如果國家已經正確的)——針將被設置為他們的正確位置和吐溫類將被更新為正確的進步。
注意:這個方法被調用時不斷控制器檢測到一個變化。唯一對你的應用程序如果你改變ScrollMagic領域之外的事,就像移動觸發或改變漸變參數。
返回：父對象鏈接。｛控制器｝
示例：
//在下一個循環中更新一個特定的場景
controller.updateScene(scene);
//立即更新特定場景
controller.updateScene(scene,true);
//更新多個場景場景下一個周期
controller.updateScene([scene1, scene2, scene3]);
參數(getter/setter)
啟用（new State ） > {布爾| 控制器}
獲取或設置當前啟用狀態的控制器
這可以用於禁用所有鏡頭鏈接到控制器不破壞或刪除他們
返回:當前啟用狀態或對象鏈接｛布爾|控制器｝
示例：
//當前值
var enabled = controller.enabled();
//禁用控制器
controller.enabled(false);
loglevel(newLoglevel) →{ |數字控制器}
獲取或設置當前logleve選項值
返回：當前logleve或父對象鏈接。{數量|控制器｝
示例：
//當前值
var logleve = controller.logleve();
//設置新值
controller.logleve(3);
scrollPos(scrollPosMethod) > {數字控制器｝
獲取當前scrollPosition或者設置一個新的計算方法。
- >得到:
當用作getter函數將返回當前滾動位置。
得到一個緩存值使用Controller.info(“scrollPos”),這將被更新在��新周期。
垂直控制器它將返回頂部滾動抵消和水平應用它將返回左偏移量。
- >設置:
當用作setter方法prodes一種永久覆蓋控制器的滾動位置計算。
一個典型usecase當滾動位置不反映容器scrollTop或scrollLeft值,但例如容器的內部抵消一個孩子。
移動的子容器內一個父幾個滾動框架是一種常用的方法,包括iScroll。
通過提供一個替代計算功能可以確保ScrollMagic收到正確的滾動的位置。
也請記住,你的函數應該返回垂直滾動x y值為橫向。
改變當前滾動位置請使用 Controller.scrollTo().
返回：當前滾動位置或父對象鏈接。{ 數量| 控制器 }
示例：
//獲得當前滾動位置
var scrollPos = controller.scrollPos();
//設置一種新的滾動位置計算方法
controller.scrollPos(function () {
return this.info("vertical") ? -mychildcontainer.y : -mychildcontainer.x
});
屬性(getter)
信息（關於） > ｛混合| 對象｝
得到所有信息或一個特定的控制器
返回： 所請求的信息。｛混合|對象｝
示例：
//返回當前滾動位置(編號)
var scrollPos = controller.info("scrollPos")
// 以對象的形式返回所有信息
var infos = controller.info();
待續...ScrollMagic場景