Parallax Effect on Text

Question

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

Do you have a working demo of your own code?

Ouroborus
– Ouroborus

2017-01-03 23:32:39 +00:00
Commented Jan 3, 2017 at 23:32 — Ouroborus
– Ouroborus, Commented Jan 3, 2017 at 23:32

Tomoya · Accepted Answer · 2023-02-16 09:31:13Z

1

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/)

edited Feb 16, 2023 at 9:31

Tomoya

1211 silver badge4 bronze badges

answered Jan 4, 2017 at 0:13

Runny Yolk

1,1644 gold badges25 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Notorious Over a year ago

Oh wow, that worked, thanks so much. I really must make myself more familiar with JS. Cheers!

Collectives™ on Stack Overflow

Parallax Effect on Text

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related