javascript - jQuery Plugin Scrollorama 时间错误

Question

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

http://jsfiddle.net/DcSjB/

这就是我所说的scrollorama：

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

现在在文档中您可以阅读

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

但是动画开始完全不同取决于屏幕的宽度。我知道动画应该在 .scrollblock 开始进入屏幕时开始。

我在这里做错了什么？

Answer 1

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

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

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/