文本上的视差效果

Question

我希望实现的目标的一个完美示例是在您登陆后立即显示在此页面上（视差背景、文本褪色和文本视差）：themenectar.com

我正在使用 parallax.js 作为我的背景，效果很好。我也在使用下面的这个 sn-p，它会使我的标题在滚动时淡出：

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 + ')');

当然要玩弄数字以获得所需的效果。

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