10 Awesome Sites Using Parallax Design
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.
Free lettering worksheets
Download now!
Getting started with hand lettering?
Download these worksheets and start practicing with simple instructions and tracing exercises.
Download 6 Products for Free
Awesome stuff for inspiration
This one is really cool too :
http://www.fiftythree.com/pencil
Great Collections!
number 7 it's not parallax.
http://en.wikipedia.org/wiki/Parallax
Awesome
Very nice examples!
Very Nice Sharing CM, i have bookmarked also these parallax design website
http://wagerfield.github.io/parallax/
http://boy-coy.com/#home
& also at CM some cool Product related to parallax design is here :
https://creativemarket.com/graphicon/26155-Parallax-Blurred-Backgrounds (Awesome Backgrounds if you want to create single page website or also you can use these in mobile appliactions)
https://creativemarket.com/Retropaw/13745-Textured-Landscape (we can create beautiful parallax effect with this item)
https://creativemarket.com/ThemeStreet.Net/18233-404-Error-Cartoon-Page
Thanx!
It's a cool idea, unfortunately some of the sites make me feel motion sickness. Maybe something to take into account how the eyes adjust and movement affects people, similar to 3D movies and games that can cause motion sickness.