javascriptjquerycssparallaxparallax.js

Parallax Effect on Text

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

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.

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

Solution

  • 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}px)`});

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

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