jquery - 如何用Greensock实现视差效果？

Question

成就

我在 Antoni.de 上看到了英雄视频的流畅视差动画。我在这里注意到两件事。首先，滚动被平滑化，其次，标题视频内有视差效果。我想达到这些效果。

我的代码我想出了以下内容:

$(window).scroll(function() {
            var scrollPos = $(this).scrollTop();
            console.log(scrollPos);

            root.parallaxBackground(scrollPos);
        });
parallaxBackground: function(scrollPos) {

    // Development
    console.log('init parallaxBackground');

    // Still need work
    var background = $('.hero').find('.background');
    var simpleParallax = -.15;

    if (scrollPos > 0) {
        // Do the magic
        TweenMax.set(background, {
            x: 0, 
            y: -(scrollPos * simpleParallax)
        });
    }

}

问题

上面的代码可以工作，但是当我快速滚动时，背景 div 会在一直滚动到顶部时停留在一定数量的像素处。 ScrollPos 应该为零，因此视差也应为零。

问题是我做错了什么或遗漏了什么，以及为了在实验中获得平滑滚动我遗漏了什么？

如果还有任何问题或其他问题，请告诉我!

Answer 1

你的问题是，当你滚动太快时，你的变量scrollPos将从300跳到0，因此if条件中的代码将不会被触发。当发生这种情况时，您需要做的就是将scrollTop 设置为0。

像这样的东西会起作用:

parallaxBackground: function(scrollPos) {

// Development
console.log('init parallaxBackground');

// Still need work
var background = $('.hero').find('.background');
var simpleParallax = -.15;
var pos = scrollPos;
if(scrollPos <= 0) pos = 0;
// Do the magic
TweenMax.set(background, {
    x: 0, 
    y: -(pos * simpleParallax)
});

}