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/

Answer 2

HERE you will find your plugin!

It is Parallax effect.

Answer 3

A great way to explore these things is to open the page using the firebug plugin in firefox, or the developer console in chrome, and look at the page source.

It also helps, if you try something, and then post what you're having trouble with.

You can also achieve the effect using the jQuery plugins:

1. http://gsgd.co.uk/sandbox/jquery/easing
2. http://www.smoothdivscroll.com