What is parallax scrolling?
Parallax scrolling utilizes multiple layers (usually background, midground and foreground) which scroll by at different speeds to create a sense of depth and motion. When done well, this approach can help transform content that might have been dry reading into a highly engaging storytelling experience.
Avoid competing experiences
There are dozens of beautiful parallax scrolling sites on the web, but many struggle to use the technique to actively support their content. In some, the movement created by many layers is clunky unless you scroll rapidly—too rapidly to read any text. In others, it is a challenge to pin down a feature or box of text because they appear suddenly and slip away at the slightest movement of my mouse scroll. In either case, I found myself examining each site twice – once to appreciate the parallax scrolling and a second time to actually read the text on the page. The implication for a user’s experience is striking. When the scrolling competes with content, a site is divided into two experiences—scrolling or reading—and a user can’t have both experiences in one go.
Seamless experiences blend content and design
There are, however, some fantastic sites that leverage parallax scrolling to support and advocate for their content and messaging. These examples show a variety of creative approaches and all create seamless experiences that blend content and design.
Survey of the States
www.surveyofthestates.com
SurveyoftheStates.com draws a connection between high student debt rates and a lack of financial literacy in the US. Traditionally, this information might have been presented in a static powerpoint or pdf. But here, parallax scrolling contributes to a dynamic narrative that builds a compelling case by presenting only a single bite-sized fact or figure at a time. This design and scrolling technique also helps make financial information more digestible and appealing to a young audience.
Drug Treatment
www.drugtreatment.com
Drug Treatment balances scrolling and content by utilizing parallax scrolling solely as a transition between frames of text. Healthcare topics often run the risk of coming across as daunting or tedious, but the beautiful transitions created here are a fun way to brighten the user’s mood. Note: Placing a single advance button on the right is a great way to allow users to power the transitions with a single click. This guarantees the transitions will move at the speed they were designed to (not too fast, not too slow).
Every Last Drop
http://everylastdrop.co.uk/
The use of parallax scrolling on this site creates a highly relatable narrative, allowing room scenery to assemble and disassemble around the protagonist. Timed to perfection, the embedded facts are easy to read and digest, and are supported by the dynamic environment created by the multiple layers. Note: A button at the lower right gives the user a semi-auto click option to power the transitions with a single click.
Lost Worlds Fairs (Atlantis)
http://www.lostworldsfairs.com/atlantis
A classic example of parallax scrolling, “Lost Worlds Fairs” uses two simple layers to bring you on a journey through the sea to the depths of Atlantis. A fun storytelling approach with fun facts along the way motivates the user to keep going, while the effort of scrolling down actually adds to a sense of motion.
Dangers of Fracking
http://www.dangersoffracking.com/
The Dangers of Fracking uses a downwards scroll and tubular layout to give the user a sense of motion. Key to the success of this approach is bite-sized content that is along the way that is hard to miss.
Update: Tinke
Another site in the healthcare and wellness field recently came to our attention – Tinke.
www.zensorium.com/tinke/
Here, parallax scrolling conveys the small size and mobility of the device. The moving image of the Tinke monitor embeds itself into illustrations and descriptions to create a seamless explanation of the product.
More Examples
The above sites are only a few examples. Check these out too:
What are your favorite parallax scrolling sites? There are tons out there, so we’d love to hear your suggestions in the comments below!
*This post was updated on July 26, 2013 to include Tinke