文字上的视差效果

Question

登陆后立即在此页面上显示我想要实现的完美示例（视差背景，文本淡入和文本视差）： 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 + ')');

当然，试一下数字以获得所需的效果。

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