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.

Answer 1

HERE you will find your plugin!

It is Parallax effect.

Answer 2

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

Answer 3

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/