How to achieve fixed position background scroll/reveal effect? jQuery plugin available?

Question

I was wondering if anyone knows if there is a jquery plugin, or how to achieve this sort of effect that is visible on the 'collection' section of fashion label krystalrae.com

Screen Capture Video

Any tips or nudges in the right direction would be greatly appreciated!

Thank you!

Answer 1

You can do this with CSS. All you need is some divs that are the same height as the window, with different background images with the property background-attachment: fixed;.

#one
{
    background: url(http://images.buzzillions.com/images_products/07/02/iron-horse-maverick-elite-mountain-bike-performance-exclusive_13526_100.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

#two
{
    background: url(http://img01.static-nextag.com/image/GMC-Denali-Road-Bike/1/000/006/107/006/610700673.jpg);
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment:fixed;
}

http://jsfiddle.net/Kyle_/mbhLN/