滚动魔法是如何工作的?
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场景