Question

我使用jQuery Plugin scrollorama做了一个小例子：

这是我称之为scrolloramama的地方：

(function($){
  $(document).ready(function() {
        var scrollorama = $.scrollorama({
            enablePin:false,
            blocks:'.scrollblock'
        });
        scrollorama.animate('#example1', {
            start:0,         
            duration:400,           
            property:'opacity'
        })
    });
})(jQuery);

现在在文档中你可以阅读

“动画设置为在滚动块顶部位于浏览器窗口底部时开始”

但根据屏幕的宽度，动画开始完全不同。我知道动画应该在.scrollblock开始进入屏幕时开始。

我在这里做错了什么？

Answer 1

我想说这是因为这些段落是流动的。固定的将有助于保持动画开始一致，因为当您调整窗口大小时，页面高度会发生变化。如果使用新宽度刷新页面，则动画应相对于新的宽度和高度始终一致。

如果您想允许调整浏览器大小，那么我建议您重新实例化该页面的滚动条。

Answer 2

只需添加一个负延迟即可修复它。

(function($){
$(document).ready(function() {
    var scrollorama = $.scrollorama({
        enablePin:false,
        blocks:'.scrollblock'
    });
    scrollorama.animate('#example1', {
        delay: -200,
        start:0,         
        duration:400,           
        property:'opacity'
    })
});

http://jsfiddle.net/ce5AP/

jQuery插件Scrollorama错误的时机

2 个答案: