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

当然可以使用这些数字来获得理想的效果。

由于性能原因（https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/）

，Transform CSS属性很好

对文本的视差效果

1 个答案: