Question

I really like the way each background section overlaps each other which scrolling down. I have seen it done a lot:
here is the link : http://www.soleilnoir.net/believein/

Any ideas how to achieve the similar effect?

Thanks

Answer 1

This effect is called parallax.

Here are some links related to this effect:

• a great demo from Nike http://www.nike.com/jumpman23/aj2012/
• a collection of parallax http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design (make sure to see each example, some are really great ! ex: http://benthebodyguard.com/index.php http://www.siebennull.com/ http://janploch.de/)
• Mercedez Class A web site http://a-class.mercedes-benz.com/com/en/index.html#!/?s=live (not really parallax but still great)
• a tutorial on how to make an image slider using parallax effect http://tympanus.net/codrops/2011/01/03/parallax-slider/
• another tutorial with different effects http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
• a library to do parallax https://github.com/cameronmcefee/plax
• another library https://github.com/markdalgleish/stellar.js

You may also like this:

• http://johnpolacek.github.com/scrollorama/
• http://joelb.me/scrollpath/