原生css页面滑动到指定位置开始动画_页面滚动到某位置 进行动画效果。。。SuperScrollorama插件...

http://www.jq22.com/jquery-info236

下载地址:http://www.5iweb.com.cn/page-useful-effects/119.html

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

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

SuperScrollorama 由 TweenMax 和 Greensock 补间引擎提供动力。

第一,链接到jQuery CDN ,然后嵌入 TweenMax.js 和 SuperScrollorama。下一步,启动 SuperScrollorama。把它作为一种控制器的动画。你添加补间和时间表,针对一个元素出现在视区中或在一个特定的滚动点。

当初始化的 SuperScrollorama 有几个你可能想要更改的选项。

vars: optional properties for the pin method (object): 可选属性:

isVertical我们垂直滚动 (true) 或水平 (false) 吗?-默认值: true

triggerAtCenter:动画触发器时各自元素的起源是在 scrollarea (true) 的中心。可以更改此这里要在顶部/左侧边缘 (false)-默认值: true

playoutAnimations:过去的动画滚动应发挥出 (true) 时或只是跳到各自的最后一帧 (假) 吗?

(并不影响动画哪里持续时间 = 0)-默认:true

反:如果动画应该颠倒过来 (true) 时滚动回或不设置全局标志做 (false)-默认值: true

示例

使用 addTween 方法来生成您滚动动画。

.addTween (目标、 补间动画、 持续时间、 反向的偏移量) 目标:滚动位置 (数量) 或元素 (字符串或对象)

补间动画: Greensock 动画补间对象

持续时间:滚动以像素为单位 (0 表示自动播放) 补间动画的持续时间

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

反向:禁用反向动画上的向上滚动 (可选)

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

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

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

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

第 5 个参数是反向的你可以使用禁用反向动画。

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

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

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

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

重置:如果真正的补间将会重置到起始位置。(可选,默认值: true)

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

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

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

.pin var dur el) el:被寄予的元素 (字符串或对象)

dur:滚动 pin (以像素为单位) 的持续时间

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

的偏移量:调整针开始点

onPin:针开始回调函数

onUnpin:回调函数为 pin 的结尾

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

示例:

如果您想要更改用于在运行时的固定元素的选项,你可以使用 updatePin 方法。例如当窗口大小或您的 pin 项的大小已更改了。它预计的.pin 方法,除非所有相同的参数,但该元素是可选的。

.updatePin var dur el) el:被寄予的元素 (字符串或对象)

dur:滚动 pin (以像素为单位) 的持续时间 (可选,默认值: 0)

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

的偏移量:调整针开始点

onPin:针开始回调函数

onUnpin:回调函数为 pin 的结尾

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

示例:

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

.removePin (el,重置) el:被寄予的元素 (字符串或对象)

重置:如果真正该元素将解除固定和补间将会重置到起始位置。(可选,默认值: true)

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

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

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

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

(可选,默认值: false)

示例:

SuperScrollorama


版权声明:本文为weixin_39983563原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。