@DeeM, I’m very, very familiar with that effect and have used it a ton. It’s the same effect you’ll see here (not one of my sites):
Now, the term parallax simply means that there is a depth of field and various items are moving and different speeds (from the perception of the viewer, the way they do in real life) to give the page dimension. See here:
The effect in question is technically parallax because the background image is moving at a slightly slower speed than the rest of the body. If you use a parallax-specific jQuery plugin like Scroll Magic, you’re likely to run into some problems and bugs… just like I did.
The only way to accomplish this with those plugins is to essentially “push” the background image down very slowly as you scroll… because it needs to be slower than the default speed of everything else. I suppose you could speed everything else up but that’s:
A. Way over-thinking the problem.
B. Probably not a good practice.
So, in trying to “push” the background image down really slowly, you’ll run into some problems. First of all, you have to set a scroll duration, which is problematic because you don’t know how big the user’s screen is. Obviously you can query this sort of thing and feed it in dynamically. But, there’s a performance hit associated with that. Also, if the user scrolls up really fast by hitting say the ‘home’ button on your nav OR the ‘home’ key on their keyboard, it takes a minute for Scroll Magic to realize the animation has reversed… so there will be no background image for about 1 second.
THIS IS THE ABSOLUTE BEST TUTORIAL I’VE EVER FOUND FOR THIS:
http://code.tutsplus.com/tutorials/a-simple-parallax-scrolling-technique–net-27641
This is exactly what you want. It’s all based on setting a data-type and a data speed. It is in my mind, the most elegant solution for this. KISS!
By the way, it might have sounded like I don’t love Scroll Magic. That’s definitely not the case… because I do. It’s just not the best tool for this particular job.
