How can I achieve this background scroll effect?

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/

Answer 2

You could achieve that through a combination of watching the scroll offset position and then animating different elements based on that scroll position. You would set an event listener and at certain positions fire functions to animate an element onto the page.

If using jQuery, something like this:

$(document).on("scroll", checkScrollPosition);
function checkScrollPosition() { 
    var scrollPos = $(window).scrollTop();
    switch (scrollPos) {
        case (500):
           doSomething();
           break;
        case (1000):
           doSomethingElse();
           break;
    }
}

function() doSomething {
   // use animate to animate element(s) at 500
}
function() doSomethingElse {
   // use animate to animate element(s) at 1000
}

I'm sure that could be optimized better than that, but that should be enough to get started.