On Parallax Scrolling09/13/2013
A few thoughts on Parallax and how various techniques can be used in a reusable or modular fashion.
First, keep in mind that the parallax effect is based around the idea of simulating depth through variable speeds. If you are driving down a highway, you’ll see the mountains will move by slowly, the trees a bit faster, and finally the road signs much faster. In a website, if you’re animating everything at the same speed, or if your foreground elements are moving slower than your background elements, you’ll lose the intended effect.
Some basic principles / techniques:
Use a “curtain” effect for wholesale, full-screen, content transitions. You can use a jQuery plugin like curtain.js to accomplish this pretty easily. This method is nice because you can get full content transitions, without very much manual coding. The plugin handles most of the heavy lifting.
Animate repeating-backgrounds for a simple effect with little effort. Just measure your window scrolltop, and multiply the window offset by a small number. Hills are a great example where this effect can be subtle but fun. Animate the foremost hill’s background-position-x at (distanceScrolled *0.3) and the layer behind it at 0.4 or so. Keep your numbers pretty low – subtlety is really key with this technique, in my opinion. Throwing elements around quickly is just distracting and a poor user experience. Keep your travel distance pretty minimal if you can.
Animate non-repeating background-positions for another subtle effect with little effort. The basic idea here is to use a larger background than it’s container (hint – use a wrapper with padding) and animate the background-position upwards. A very simple technique that is pretty subtle but still has that wow factor.
Throttle your scrolling using this excellent plugin. Seriously, do it. $(window).scroll() fires extremely often, and is variable from browser to browser, and even computer to computer (or processor to processor for that matter). A throttling plugin will keep you consistent and can greatly increase your performance. Ben Alman’s excellent plugin should set you straight with little refactoring on your part.
Lastly, consider just animating certain content elements into view once you get close. We used this action with an ad agency site and it worked well. Utilize this effect so that new content is transitioned upwards into view. Once you’ve seen the content, you won’t get the transition again. This effect is setup in DirigoEdge so that all you have to do is set a class on the element that you want to transition – nothing is manual. The technical concept here is to use a css3 transform to offset the element below itself on page load. Once scrolled in to view, just add a class to the element that changes the transform back to 0,0. By utilizing the css3 transition property, the animation is done for you by just toggling the class. These two principles lead to a very snappy animation as there is minimal document reflow, if any (there are repaints obviously, but the DOM doesn’t have to recalculate positions since we’re using transform / translate).
Performance! The scroll event is a performance killer, alongside the resize event. Be extremely mindful of how many elements you are touching in the dom during your scroll event. Throttling can help a bit. Additionally, remove elements from your scroll array if you’re not using them. For example, if you animate an element in to place on scroll, remove that element from the scroll array once it’s done so it’s not needlessly updating / checking the position later on.