10 Awesome Sites Using Parallax Design

By on May 2, 2016 in Inspiration
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

Screen Shot 2014-01-15 at 8.56.33 AMPin It

Screen Shot 2014-01-15 at 8.56.43 AMPin It

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

Screen Shot 2014-01-15 at 8.58.34 AMPin It

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

Screen Shot 2014-01-15 at 9.03.24 AMPin It

Screen Shot 2014-01-15 at 9.03.32 AMPin It

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

Screen Shot 2014-01-15 at 9.05.10 AMPin It

Screen Shot 2014-01-15 at 9.05.21 AMPin It

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

Screen Shot 2014-01-15 at 9.08.38 AMPin It

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

Screen Shot 2014-01-15 at 9.09.51 AMPin It

Screen Shot 2014-01-15 at 9.10.02 AMPin It

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

Screen Shot 2014-01-15 at 9.11.52 AMPin It

Screen Shot 2014-01-15 at 9.12.02 AMPin It

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

Screen Shot 2014-01-15 at 9.14.18 AMPin It

Screen Shot 2014-01-15 at 9.14.26 AMPin It

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

Screen Shot 2014-01-15 at 9.17.02 AMPin It

Screen Shot 2014-01-15 at 9.17.12 AMPin It

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

Screen Shot 2014-01-15 at 9.18.39 AMPin It

Screen Shot 2014-01-15 at 9.18.47 AMPin It

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!

img

Download now!

Getting started with hand lettering?

Download these worksheets and start practicing with simple instructions and tracing exercises.

8 Comments

  1. 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!

  2. 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.

You must be signed in to post a comment.

Made with Creative Market

Browse a gallery of inspiration made with design assets from Creative Market.

Explore the Gallery →

Meet the Creative Market Authors

Learn more about the talented writers behind the articles.

Meet the Authors →

Download Our FREE Branding eBook

Get a FREE, fun, and friendly guide to design your own brand.

Get your eBook →