SuperScrollorama 由 TweenMax 和 Greensock 补间引擎提供动力。
第一，链接到jQuery CDN ，然后嵌入 TweenMax.js 和 SuperScrollorama。下一步，启动 SuperScrollorama。把它作为一种控制器的动画。你添加补间和时间表，针对一个元素出现在视区中或在一个特定的滚动点。
当初始化的 SuperScrollorama 有几个你可能想要更改的选项。
$.superscrollorama({options})
vars: optional properties for the pin method (object): 可选属性：
isVertical我们垂直滚动 (true) 或水平 (false) 吗?-默认值： true
triggerAtCenter:动画触发器时各自元素的起源是在 scrollarea (true) 的中心。可以更改此这里要在顶部/左侧边缘 (false)-默认值： true
playoutAnimations:过去的动画滚动应发挥出 (true) 时或只是跳到各自的最后一帧 （假） 吗？
（并不影响动画哪里持续时间 = 0）-默认：true
反：如果动画应该颠倒过来 (true) 时滚动回或不设置全局标志做 (false)-默认值： true
示例：
$(document).ready(function() {
var controller = $.superscrollorama({
triggerAtCenter: false,
playoutAnimations: true
});
});
使用 addTween 方法来生成您滚动动画。
.addTween (目标、 补间动画、 持续时间、 反向的偏移量） 目标：滚动位置 （数量） 或元素 （字符串或对象）
补间动画： Greensock 动画补间对象
持续时间:滚动以像素为单位 （0 表示自动播放） 补间动画的持续时间
的偏移量:调整动画起始点
反向：禁用反向动画上的向上滚动 （可选）
在下面的示例中，该动画淡入，当滚动到视图。
|
1
2
3
4
5
|
controller.addTween(
'#fade'
, TweenMax.from($(
'#fade'
), .5, {
css: {
opacity: 0
}
}));
|
默认持续时间为 0，这意味着通过完全当达到其点滚动时才播放补间。您可以添加一个持续时间，而是将同步到滚动条位置的补间动画进度。一个补间动画，您可以创建多个补间的时间线。
如果您使用 TweenMax 或 TimelineMax 选项 {重复：-1} 动画将环路 indefinetly 的设置持续时间。
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
// parallax example
controller.addTween(
'#examples-parallax'
, (
new
TimelineLite()).append([TweenMax.fromTo($(
'#parallax-it-left'
), 1, {
css: {
top: 200
},
immediateRender:
true
},
{
css: {
top: -600
}
}), TweenMax.fromTo($(
'#parallax-it-right'
), 1, {
css: {
top: 500
},
immediateRender:
true
},
{
css: {
top: -1250
}
})]), 1000
// scroll duration of tween
);
|
第四届参数是抵消，您可以使用来调整，可触发该动画的滚动点。
|
1
2
3
4
5
6
|
controller.addTween(
'#fade'
, TweenMax.from($(
'#fade'
), .5, {
css: {
opacity: 0
}
}), 0,
// scroll duration of tween (0 means autoplay)
200);
// offset the start of the tween by 200 pixels
|
第 5 个参数是反向的你可以使用禁用反向动画。
|
1
2
3
4
5
|
controller.addTween(
'#fade'
, TweenMax.from($(
'#fade'
), .5, {
css: {
opacity: 0
}
}), 200,
false
);
// prevent backwards animation of the element
|
当动画是完全传递给补间的函数中。
|
1
2
3
4
5
6
7
8
|
controller.addTween(
'#fade'
, TweenMax.from($(
'#fade'
), .5, {
css: {
opacity: 0
},
onComplete:
function
() {
alert(
'test'
)
}
}));
|
您可以删除任何以前添加的补间使用 removeTween 方法。
.removeTween (目标、 补间动画、 重置) 目标：滚动位置 （数量） 或元素 （字符串或对象）
补间动画： Greensock 动画补间对象 ；如果未设置，所有补间的目标将被删除。（可选，默认值: 空)
重置：如果真正的补间将会重置到起始位置。（可选，默认值： true）
在下面的示例中，从"#fade"元素的所有补间是删除和重置。
|
1
|
controller.removeTween(
'#fade'
);
|
您可以使用 pin 方法别针元素、 做一系列的动画，然后断开它。
回调函数将调用一个布尔型参数，true 如果触发的一端 （底部） 的 pin，虚假的如果在他开始 （顶部点） 触发。
.pin var dur el） el：被寄予的元素 （字符串或对象）
dur：滚动 pin （以像素为单位） 的持续时间
var:针法 （对象） 的可选属性： 阿尼姆：针过程中发生的补间动画对象
的偏移量:调整针开始点
onPin:针开始回调函数
onUnpin:回调函数为 pin 的结尾
pushFollowers:决定是否以下元素应该被推下 (true) 或滚动过去 (false)，默认值： true
示例：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
controller.pin($(
'#examples-2'
), 3000, {
anim: (
new
TimelineLite()).append(TweenMax.fromTo($(
'#move-it'
), .5, {
css: {
left: -200,
top: 500
},
immediateRender:
true
},
{
css: {
top: -400
}
})).append(TweenMax.to($(
'#move-it'
), .5, {
css: {
left: 200
}
})).append(TweenMax.to($(
'#move-it'
), .5, {
css: {
top: -200
}
})).append(TweenMax.to($(
'#move-it'
), .5, {
css: {
left: 0
}
}))
});
|
如果您想要更改用于在运行时的固定元素的选项，你可以使用 updatePin 方法。例如当窗口大小或您的 pin 项的大小已更改了。它预计的.pin 方法，除非所有相同的参数，但该元素是可选的。
.updatePin var dur el） el：被寄予的元素 （字符串或对象）
dur：滚动 pin （以像素为单位） 的持续时间 （可选，默认值： 0）
var:针法 （对象） 的可选属性： 阿尼姆：针过程中发生的补间动画对象
的偏移量:调整针开始点
onPin:针开始回调函数
onUnpin:回调函数为 pin 的结尾
pushFollowers:决定是否以下元素应该被推下 (true) 或滚动过去 (false)，默认值： true
示例：
|
1
2
3
|
controller.updatePin($(
'#examples-2'
),
null
, {
offset: 200
});
|
您可以删除任何以前添加的针脚，使用 removePin 方法。
.removePin (el，重置) el：被寄予的元素 （字符串或对象）
重置：如果真正该元素将解除固定和补间将会重置到起始位置。（可选，默认值： true）
在下面的示例中，pin 是删除，但不是会重置。
重置 = false 也将意味着如果你叫它在针期间，该元素将保持固定。
|
1
|
controller.removePin(
'#examples-2'
,
false
);
|
有时您可能想要告诉 SuperScrollorama 更新所有元素，例如，当调整窗口的大小。在这里方法 triggerCheckAnim 很有用。
.triggerCheckAnim(immediately) 立即：如果 false 它将等待下一个 tickEvent 的 TweenMax (以节省性能) 如果将马上，做真正的更新
（可选，默认值： false)
示例：
|
1
2
3
|
$(window).resize(
function
() {
controller.triggerCheckAnim();
});
|
SuperScrollorama
|
1
2
3
4
|
.setScrollContainerOffset (x，y) x: x 偏移量 scrollcontainer
y: x 偏移量 scrollcontainer
示例：
controller.setScrollContainerOffset(0, 200);
|