Question

I have a small problem.
I’m trying to do something like nikebetterworld.com‘s parallax background.
In my first attemp, I got something that works, but it can work better.
When I scroll, the background position changes. The problem is that it changes a few milliseconds after the scroll, so I can see how the background “jumps” after scrolling.

code:

var $w = $(window);
function move($c) {
    var scroll = $w.scrollTop();
    var diff = $c.offset().top - scroll;
    var pos = '50% ' + (-diff)*0.5 + 'px';
    $c.css({'backgroundPosition':pos});
}
$w.bind('scroll', function(e){
    move(some_container);
});

Any suggestions?
Thanks.

Edit

Look at this example: http://jsfiddle.net/MZGHq/
(Scroll down until you see the background image)

Answer 1

The key is to use a fixed background if you must have it smooth. See http://jsfiddle.net/MZGHq/7/

References:

This page seems to have a good explanation of how the vertical parallax effect works: http://www.webdesignshock.com/one-page-website/

Also take a look at this one (they don’t use fixed background…note how it looks a little jumpy like yours):
http://www.franckmaurin.com/the-parallax-effects-with-jquery/