javascript - 文本视差效果

Question

我希望实现的一个完美示例是您一登陆此页面(视差 BG、文本淡化和文本视差):themenectar.com

我在背景中使用 parallax.js，效果很好。我还在使用下面的这个片段，它在滚动时淡出我的标题:

function scrollBanner() {
    $(document).scroll(function(){
        var scrollPos = $(this).scrollTop();
        $('.page-title, .breadcrumbs').css({
            'opacity' : 1-(scrollPos/200),
        });
    });
}

scrollBanner();

一切正常，除了我不知道如何在我的标题上实现视差效果。

现在，当我滚动时，我的标题只是向上滚动，就像任何其他元素一样。我怎样才能让我的文本也产生视差？例如 themenectar.com 上的示例

Answer 1

我会使用您的 scrollPos 变量来操纵 CSS 属性 transform: translateY(n); 像这样:

var transY = scrollPos / 2;
$('.page-title').css({'transform':`translateY(${transY}px)`});

当然可以通过调整数字来获得预期的效果。

出于性能原因，Transform CSS 属性很好(https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)