Articles

Web Design Wednesday — Navigating the Web with Parallax Scrolling

by . February 20th, 2013

An interesting part of web design is how websites and designers create ingenious ways to navigate the web. With the introduction of HTML5 and CSS3 things are getting a little more interesting.

Designers today are now looking at web navigation as a way of storytelling – enticing visitors to click through a link or to continue scrolling down. An interesting innovation that’s being used today by web designers is the Parallax Scrolling. This type of navigation has given rise to different creative websites and shows other innovative ways we can present information on the web.

 

Web Design Wednesday -- Navigating the web with Parallax Scrolling

 

Parallax Scrolling is a technique initially developed in 2D animation and video games. This technique makes use of a layered display, wherein background images move slower than the foreground images. This process results into an illusion of depth in 2D animation.

 

SEE ALSO: Useful Wireframe Tools for Web Designers
 

Here are a few things we can possibly do with parallax scrolling:

 

Infograph

Parallax scrolling is now being used to create interactive infographs on the web. You can checkout Evans Halshaw’s James Bond Cars infograph presented in Parallax.

parallax scrolling example 03

James Bond Cars infograph

 


 

Portfolio

One way of showing skill in web design is to create an online version of your portfolio, another way is to make your portfolio interactive with Parallax scrolling. Check out Ian James Cox’s online portfolio and Phase 2 Design’s website.

 

parallax scrolling example 06

Phase 2 Design’s Website

 

parallax scrolling example 02

Ian James Cox

 


 

How-To

Another possible way to interactively present a How-to, apart from video tutorials, is through Parallax scrolling. Because of Parallax scrolling’s capability to streamline information in one fluid animation, creating how-to’s can be easier, and people will be able to follow through the instructions easily.

Check out drugtreatment.com’s interesting take on the drug detox process.

parallax scrolling example 01

DrugTreatment.com’s Drug Detox

 


 

Creative Storytelling

Apart from interesting and informational websites in Parallax, web designers are now also weaving stories online that are made in the same technique. You can checkout Jess and Russ’ love story on their website, and Lost World Fairs’ fictional history of Atlantis.

 

parallax scrolling example 04

 Jess and Russ’ Love Story

 

parallax scrolling example 05

 Lost World Fair’s Atlantis

 


 

What’s in store for the Future?

We can expect web developers and designers to create a parallax version of social media sites. Just imagine how Facebook’s and Twitter’s timeline and newsfeed would look like in this animation technique. In a couple of years and we’ll be seeing these visions come to life. We’ll just have to wait and enjoy the ride for now.

Are you developing a website with a Parallax scrolling function? Tell us more about it through the comments section! Stay awesome everyone!

ABOUT THE AUTHOR:

A Procrastinator Extraordinaire. Hopes to become a professor someday, somewhere. An avid fan of music, film, and books. Sidelines as a creative adviser for friends and friends of friends. Hopes to win an award through a film, which up until now is still in his head.

%d bloggers like this: