I'm facing a minor issue. I want to create a parallax background effect similar to what can be seen on nikebetterworld.com. In my initial attempt, I managed to achieve some functionality, but I believe it can be improved. As I scroll, the background position changes. However, there is a slight delay in this change which causes the background to "jump" after scrolling.
Here's the code snippet:
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);
});
Does anyone have any suggestions? Thank you.
Edit
Take a look at this example: http://jsfiddle.net/MZGHq/ (Scroll down until you see the background image)