滚动动画

 查看演示  website  立即下载

如何使用

请注意，这是一个功能强大的工具，并且拥有非凡的能力,能力越大责任越大。

明智地使用。有点微妙可以走很长的路。

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 表示自动播放） 补间动画的持续时间

的偏移量:调整动画起始点

反向：禁用反向动画上的向上滚动 （可选）

在下面的示例中，该动画淡入，当滚动到视图。

controller.addTween('#fade', TweenMax.from($('#fade'), .5, {
css: {
        opacity: 0
    }
}));

默认持续时间为 0，这意味着通过完全当达到其点滚动时才播放补间。您可以添加一个持续时间，而是将同步到滚动条位置的补间动画进度。一个补间动画，您可以创建多个补间的时间线。

如果您使用 TweenMax 或 TimelineMax 选项 {重复：-1} 动画将环路 indefinetly 的设置持续时间。

// 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
);

第四届参数是抵消，您可以使用来调整，可触发该动画的滚动点。

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 个参数是反向的你可以使用禁用反向动画。

controller.addTween('#fade', TweenMax.from($('#fade'), .5, {
    css: {
        opacity: 0
    }
}), 200, false); // prevent backwards animation of the element

当动画是完全传递给补间的函数中。

controller.addTween('#fade', TweenMax.from($('#fade'), .5, {
    css: {
        opacity: 0
},
onComplete: function() {
        alert('test')
    }
}));

您可以删除任何以前添加的补间使用 removeTween 方法。

.removeTween (目标、 补间动画、 重置) 目标：滚动位置 （数量） 或元素 （字符串或对象）

补间动画： Greensock 动画补间对象 ；如果未设置，所有补间的目标将被删除。（可选，默认值: 空)

重置：如果真正的补间将会重置到起始位置。（可选，默认值： true）

在下面的示例中，从"#fade"元素的所有补间是删除和重置。

controller.removeTween('#fade');

您可以使用 pin 方法别针元素、 做一系列的动画，然后断开它。

回调函数将调用一个布尔型参数，true 如果触发的一端 （底部） 的 pin，虚假的如果在他开始 （顶部点） 触发。

.pin var dur el） el：被寄予的元素 （字符串或对象）

dur：滚动 pin （以像素为单位） 的持续时间

var:针法 （对象） 的可选属性： 阿尼姆：针过程中发生的补间动画对象

的偏移量:调整针开始点

onPin:针开始回调函数

onUnpin:回调函数为 pin 的结尾

pushFollowers:决定是否以下元素应该被推下 (true) 或滚动过去 (false)，默认值： true

示例：

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

示例：

controller.updatePin($('#examples-2'), null, {
    offset: 200
});

您可以删除任何以前添加的针脚，使用 removePin 方法。

.removePin (el，重置) el：被寄予的元素 （字符串或对象）

重置：如果真正该元素将解除固定和补间将会重置到起始位置。（可选，默认值： true）

在下面的示例中，pin 是删除，但不是会重置。

重置 = false 也将意味着如果你叫它在针期间，该元素将保持固定。

controller.removePin('#examples-2', false);

有时您可能想要告诉 SuperScrollorama 更新所有元素，例如，当调整窗口的大小。在这里方法 triggerCheckAnim 很有用。

.triggerCheckAnim(immediately) 立即：如果 false 它将等待下一个 tickEvent 的 TweenMax (以节省性能) 如果将马上，做真正的更新

（可选，默认值： false)

示例：

$(window).resize(function() {
    controller.triggerCheckAnim();
});

SuperScrollorama

.setScrollContainerOffset (x，y) x: x 偏移量 scrollcontainer
y: x 偏移量 scrollcontainer
示例：
controller.setScrollContainerOffset(0, 200);

PREVIOUS:
NEXT:
交互式的表格插件
jQuery提取图像的主色