Search This Blog

Wednesday, January 23, 2013

Navigating the Web with Parallax Scrolling

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


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