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

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

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