文本的视差效应 [英] Parallax Effect on Text

问题描述

我希望实现的一个完美的例子就是在你登陆它的同时在这个页面上（视差BG，文本淡出，文本被视差）： themenectar.com

A perfect example of what I am looking to achieve is on this page as soon as you land on it (parallax BG, text fades, and text is parallaxed):themenectar.com

我正在使用parallax.js作为我的背景，效果很好。我也在下面使用这个片段，在滚动中淡出我的标题：

I am using parallax.js for my backgrounds which works great. I am also using this snippet below which fades my title out on scroll:

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

scrollBanner();

一切正常，除了我对如何在我的头衔上实现视差效果感到困惑。

Everything works fine, except for that I am stumped on how to achieve a parallax effect on my title.

现在当我滚动标题时，只需向上滚动，就像任何其他元素一样。我怎么能去制作我的文字视差呢？例如在 themenectar.com

Right now when I scroll my title just scrolls up, as it would any other element. How could I go about making my text parallax too? Such as in the example on themenectar.com

推荐答案

我会用你的scrollPos变量来操作CSS属性 transform：translateY（n）; 这样的事情：

I would use your scrollPos variable to manipulate the CSS property transform: translateY(n); something like this:

var transY = scrollPos / 2;
$('.page-title').css('transform':'translateY(' + transY + ')');

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

Of course play around with the numbers to get the desired effect.

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

The Transform CSS property is good for performance reasons (https://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/)

这篇关于文本的视差效应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！