滚动动画

查看演示立即下载

插件描述：这是一个功能强大的工具，并且拥有非凡的能力滚动视差插件

如何使用

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

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

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

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

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

1	`$.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"元素的所有补间是删除和重置。

1	`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 也将意味着如果你叫它在针期间，该元素将保持固定。

1	`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);

特别申明：
本站所有资源都是由网友投稿发布，或转载各大下载站，请自行检测软件的完整性！
本站所有资源仅供学习与参考，请勿用于商业用途，否则产生的一切后果将由您自己承担！
如有侵权请联系我们删除下架，联系方式：lei1294551502@163.com

上一个特效： jQuery提取图像的主色
下一个特效：交互式的表格插件