Creating basic parallax effect with jQuery and window.pageYOffset

Question

I am trying to create an effect that when you scroll, a slider image will scroll down with the page, at a slower rate. This is similar to parallax, and a good demo would be this site: http://escapeflight.com/

If you scroll down the page, you can see the effect I am talking about.

My application is similar, but I have a header that is not fixed. Code Below:

header = $('header').height();

function setTopSlider(){
    offset = window.pageYOffset;

    //if we have scrolled down past the height of the header, we want to begin the 'parallax' effect
    if(iScroll > header){
        $('.slides').css('top',(offset/3))
    }else{
        $('.slides').css('top',0);
    };
};

$(window).scroll(function () {
    setTopSlider();
});

This works, but when you scroll past the height of the header, the css value of .slides Jumps down to the calculated value. I need help with this calculation offset/3 so that when you reach the top of the slider, there is no jump - it just starts scrolling down but at a different rate than the rest of the page

To reiterate, I need the slider to scroll at a slower speed then the rest of the page, so I am using the above technique to 'fake this' by setting its 'top' position, which is calculated by the current pageYOffset. Any ideas?

Answer 1

This will depend on how you have your markup setup. On the site you've shown they have an absolute positioned div and they're adjusted the top value. I'm assuming you're doing the same with a similar html/css structure. If so, try:

$('.slides').css('top' , ((offset - header)/3 ));

Adjust the "/3" as you see fit to tweak the speed.