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一直滚动到顶部时，背景div会停留在一定数量的像素上。 ScrollPos应该为零，因此视差也应该为零。

问题是我做错了什么，或者错过了什么？为了使实验顺利滚动，我想念什么？

如果还有任何问题或疑问，请告诉我！

Answer 1

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

类似的事情会起作用：

Table.TransformColumns(#"Valeurs extraites1",{"Column1.images",each Record.ToTable(_)})

如何用Greensock达到视差效果？

成就

问题

1 个答案: