文本视差效果

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

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

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

文本视差效果

Parallax Effect on Text

javascript

css

jquery

parallax

parallax.js