使用Javascript（jQuery）的深度效果

Question

Does anyone know (as in http://james.padolsey.com/ ) how the upper body layer is scrolling at a faster speed while the background is scrolled at a slower speed making it give an effect of depth??

Can I implement multiple layers (more then 2) scrolling at different speeds using the similar concept??

Answer 1

Below is the bit of code that does this. I did not write it, just looked at his source and got it.

var a = document.body,
    e = document.documentElement;
$(window).unbind("scroll").scroll(function () {
    a.style.backgroundPosition = "0px " + -(Math.max(e.scrollTop, a.scrollTop) / 8) + "px"
})

Live Demo

Answer 2

I didn't find the code in the source, but I recreated it reasonably:

$(window).scroll(function(e){
    $('body').css('background-position', 
                  '0 ' + parseInt($(this).scrollTop()*0.5,10) + 'px');
});

Demo →