jQuery和Css3实现的超级滚动触发视差动画效果 - SuperScrollorama

如何使用请注意，这是一个功能强大的工具，并且拥有非凡的能力,能力越大责任越大。SuperScrollorama 由 TweenMax 和 Greensock 补间引擎提供动力。第一，链接到jQuery CDN ，然后嵌入 TweenMax.js 和 SuperScrollorama。下一步，启动 SuperScrollorama。把它作为一种控制器的动画。你添加补间和时间表，针对一个元素出现在视区中或在一个特定的滚动点。当初始化的 SuperScrollorama 有几个你可能想要更改的选项。$.superscrollorama({options})vars: optional properties for the pin method (object): 可选属性：isVertical我们垂直滚动 (true) 或水平 (false) 吗?-默认值： truetriggerAtCenter:动画触发器时各自元素的起源是在 scrollarea (true) 的中心。可以更改此这里要在顶部/左侧边缘 (false)-默认值： trueplayoutAnimations:过去的动画滚动应发挥出 (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 examplecontroller.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 偏移量 scrollcontainery: x 偏移量 scrollcontaine

在线演示        积分下载        6毛下载        砍两刀下载