Parallax - "survey of the landscape circa Nov 2012"

I work with some really strong software engineers and Ward is one such. While on a project the Creative team were interested in having some parallax effects on the homepage. I did not have the time to "survey the parallax landscape" but I managed to get some of Wards time to help not just for my particular project but any project planning parallax.
Goals:
- establish terminology and examples
- understand options for building
- some effort estimate for this project
- nice to have: some prototype 
In the course of this I was also curious to learn why nike better world and new zeland.com are no longer parallax?

Below is Wards writeup.

Hi All:

I'd been asked to do a little background investigation around implementing a parallax type scrolling effect for the S* site that's currently in development. I thought it might be useful if I briefly shared some of the things I've discovered.

First off what do we mean when we talk about a parallax type effect? At it's loosest the term can be applied to an experience where scrolling content has a secondary effect of triggering some kind of animation or change in the content itself. Here's a couple of examples demonstrating this meaning:

• In the Anna Safroncik site, various animations are triggered in the site as the user scrolls down the page.
• The Chaiken Clothing has a variety of interesting things that are correlated to scrolling, including image swapping, and both horizontal and vertical background image translations (sliding movements).

The dictionary defines parallax as:
"the effect whereby the position or direction of an object appears to differ when viewed from different positions, e.g., through the viewfinder and the lens of a camera."
Viewfinder in our case can be considered the browser viewport, or the visible browser content area. This animation provides a good illustration. The effect was famously utilized in many classic Walt Disney cartoons such as "Snow White and the Seven Dwarfs", utilizing a multiplane animation camera. This camera filmed down through multiple glass panes at once, each layer containing artwork which could be slid at varying rates.
The Hobo Lobo of Hamelin story/site is an awesome implementation of this classic story animation technique in a web context (horizontally scroll or click the numbers to change scenes).
At it's simplest the classic parallax effect is akin to what you see looking out the side window of a car speeding down a desert highway: roadsigns and markers seem to whip past, the cacti in the mid-ground seem to move past at a somewhat slower pace, while distant mountains crawl slowly past.
There are a lot of sites that have cropped up over the past couple of years that emulate this classic effect to one degree or another:

• The S* team had me take a look at the Yves Saint Laurent experience site -- really nicely done.
• The dutch Laurentius site is really nice too
• Here's a tutorial example demonstrating what seems to be a pretty common implementation pattern

I won't dive deep into implementation details here, but the basis of common implementations have a series of <div> containers stacked horizontally or vertically together, exceeding by a significant amount the area of the browsers viewport. JavaScript code is triggered in response to window scroll or resize events that then manipulates the content in these divs. The divs typically have one or more background images whose position properties are changed to typically make them appear to be moving slower than the scrolling rate.  The div boundaries and contained text content usually move at the scroll rate. Other sprite child elements in the divs can be animated to move faster than the scroll rate. Control of these speed differentials and z-index ordering can create a nice multi-plane parallax kind of effect.
As cool and simple as this seems, it can be deceptively difficult to pull off well. It's not unusual to see stuttering jittery artifacts in the animation of elements as you scroll. Partly this illustrates the need to optimize the implementation so that it is only applied to elements that are currently visible in the viewport, so the browser's not working as hard animating off-screen elements. Throttling scroll events could also help.
But a more significant limitation is that continuous scroll based effects (as parallax is commonly implemented) don't really work at all on an iOS device. This is because as opposed to desktop browsers, Mobile Safari at least does not continuously emit scroll events as web page content is being scrolled. You get a scroll event at the beginning and the end, and that's it. I don't know what the story is on Android, but there might be some scroll based issues there too as well. A common work-around for this limitation is to have a platform switch in your code that sniffs for iOS and disables the effect in that case, falling back to static positioning of the elements. This isn't necessarily awful, although disappointing.
It's interesting that some of the show-case parallax sites no longer seem to be parallax-y, notably Nike Better World and NewZealand.com. Maybe the lack of iPad support, or just a sense of this being yesterday's fad were a factor? This site is a good survey of parallax-based sites, which includes some of those I've mentioned plus many others. In my opinion parallax in it's various flavors is an effective and compelling technique that can add visual interest. Limited uses in service of the main content can be quite effective and performant, as evidenced by our recent implementation for Jeld-Wen (btw, this one works on the iPad since it doesn't rely on scroll events). But lack of mobile integration could be a major inhibition as these devices become more dominant.

Cheers,
Ward