116

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.

Tags

Log in
Register