Responsively animate page elements while scrolling using JavaScript [EDIT: Parallax Scrolling]
I'm certain this has been brought up in the past; however I'm at a loss for a term.
On this web page for square, the user scrolls through the section titled "At Square, different disciplines collaborate to design beautifully simple solutions."and the animation is activated to the right at that specific point on the page. As the user scrolls back the image reverts and so on. How are they achieving this?
AUG 2013: So it's been nine months since I've asked this question and parallax scrolling has just about run it's course. I'm attaching several links for further reading on this subject ranging from how to achieve it to why to avoid it.
Examples of parallax scrolling:
- http://en.wikipedia.org/wiki/Parallax_scrolling
- http://www.awwwards.com/20-best-websites-with-parallax-scrolling-of-2013.html
- http://www.cloudberrycreative.com/blog/6-sites-that-get-parallax-scrolling-right/
Tutorials:
- http://tympanus.net/codrops/2012/04/30/fluid-css3-slideshow-with-parallax-effect/
- http://tympanus.net/codrops/2012/03/15/parallax-content-slider-with-css3-and-jquery/
- http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/
- http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/
Thoughts:
Answer
It is called parallax scrolling.
They just detect the window position and then apply a jquery animation when the window is scrolled to whatever points they set.
See an in-depth explination and tutorial here: http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/
There is an example and opensource GitHub project here: http://prinzhorn.github.com/skrollr/
In my opinion it is normally bad design. I suppose it can be subtle and done well but it often is distracting for no real purpose.