Parallax design is slated to be one of the biggest trends in web design in 2014. The style, which uses layers that scroll at different speeds to create a cool 3-dimensional effect, is a great narrative device and is helping websites do more in one page than ever before. Want to see some cool examples of sites using parallax design? Check 10 great ones out below.
1. Cyclemon
Cyclemon is a project completed by two French designers to mark the 100th anniversary of the Tour de France in 2013. The concept behind the page is that a person’s bike reflects their personality (“You are what you ride.”) The cyclemon page allows visitors to scroll down the page and see bike designs as they pair up with personality types. Once you’ve reached the end of the page and have seen all the design stereotypes, you are presented with a link to go and design your own bike.
2. TheQ
The Q is an awesome new camera that automatically uploads a photo you take to the internet or social media when you take it. TheQ’s site incorporates both parallax scrolling and video backgrounds. Not only does the page reflect the most up-to-date impressive technology of the time (which speaks well for the product) but it breaks up text about the camera with pictures of it/taken by it, so users can clearly see and understand what the camera does.
3. Puma Mobium
The Puma Mobium is a new, elite running shoe created for serious runners. The shoe’s site incorporates horizontal scrolling. It centers on a runner who is running across a studio stage, and visitors can click and drag the runner across the page to see the show in action and understand its features better. Parallax design particularly pairs well with a product like a running shoe because they are both focused around movement/action.
4. Drug Treatment.com
Drug Treament.com, a site that advocates recovery from drug use and addiction, uses both flat design and parallax scrolling. The site uses parallax design extremely effectively to communicate a narrative – that is, what it’s like to go from addiction to recovery, with the background of the site going from stormy to sunny as you go from the addiction to treatment to recovery phase.
5. Mercedes Benz A-Class
This new Mercedes Benz website includes up-to-date information about its newest A-class car. The site uses parallax scrolling to make it look like you are inside a car and driving down the street. The movement and scrolling of the page are an appropriate pairing for the idea of a driving a car; the site also uses parallax design nearly perfectly to create the illusion of movement and 3 dimensions – an immersive experience for a visitor.
6. Too Young to Wed
Too Young to Wed is an organization that aims to raise awareness about (and fight against) child marriage in the developing world. The site uses parallax design extremely well to explain to the world the true story and facts about child marriage in the developing world. Its design helps communicate difficult and hard-to-swallow info clearly and effectively.
7. Atlantis World’s Fair
People have referred to the Atlantis World’s Fair site as one of the web’s best examples of “scrollytelling”. The site is part of the Lost World’s Fairs series, a fictional series of pages that focus on typography online. The Atlantis World’s Fair site illustrates a an elevator going down deep to the depths of the seas – to Atlantis. When scrolling down the site, viewers see a man in an elevator descend, while the site provides information about different depths of the sea and about Atlantis.
8. Dangers of Fracking
Fracking is one of the most heated environmental debates these days, and its site uses parallax design well to illuminate why the process might be dangerous. Fracking, or hydraulic fracturing, is a means of drilling using water – is known to contaminate water, which has caused a huge and passionate backlash from the peoples whose water will be affected. The Dangers of Fracking site explains the process of fracking, and as users scroll, they can see how fracking happens and why its results would be bad for everyone – chronologically.
9. Paranorman
Paranorman was a popular 3d stop-motion animated film that came out in 2012. Its promotional site was designed with parallax design, which allowed for excellent storytelling on the site and mirrored the most up-to-date and relevant technology used for the animation in the movie.
10. Tinke
Tinke is an awesome device that was developed to monitor your health – like your heart rate, blood oxygen level, respiratory rate and more. The device is tiny and mobile, so you can carry it with you wherever you go. The Tinke site uses parallax design to explain what the device does and how it does it; the technologically-advanced nature of the parallax design also pairs well with the impressive technology used by Tinke.
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download now!
I'm a recent graduate of the University of San Francisco with a degree in Biology and a passion for the creative arts. I love building websites, trying new things, and I have a passion for social media.
View More Posts
8 Comments