Faster scroll event? - Background "jumps" after scrolling

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/

Answer 2

var pos = '50% ' + (-diff)*0.5 + 'px';

I believe the problem is the 0.5. When you calculate the new position there is enough of a difference between the previous and new location for it to be a perceptible shift.

Changing 0.5 to 0.2 or lower minimizes this a bit, however the parallax effect is less pronounced - which is not what you want.

I would try a different approach - take a peek at GitHubs 404 page as an example: https://github.com/ddflsdigjh;ad

Answer 3

1. use 'fixed' background
2. the displacement of background position should be much bigger than scroll (not 0.5 but 0.01) it seemed that the problem take place only in FF. This is the slowest browser in rerendering pages and javascript.