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.
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 03](http://www.youthedesigner.com/wp-content/uploads/2013/02/James-Bond.png)
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.
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 06](http://www.youthedesigner.com/wp-content/uploads/2013/02/phase-2-design.png)
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 02](http://www.youthedesigner.com/wp-content/uploads/2013/02/ian-james-cox.png)
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.
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.
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 04](http://www.youthedesigner.com/wp-content/uploads/2013/02/jessa-and-russ.png)
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.
![Web Design Wednesday -- Navigating the web with Parallax Scrolling](http://www.youthedesigner.com/wp-content/uploads/2013/02/POST.jpg)
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.
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 03](http://www.youthedesigner.com/wp-content/uploads/2013/02/James-Bond.png)
James Bond Cars infograph
PortfolioOne 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.
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 06](http://www.youthedesigner.com/wp-content/uploads/2013/02/phase-2-design.png)
Phase 2 Design’s Website
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 02](http://www.youthedesigner.com/wp-content/uploads/2013/02/ian-james-cox.png)
Ian James Cox
How-toAnother 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.
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 01](http://www.youthedesigner.com/wp-content/uploads/2013/02/drug-treatment.png)
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.
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 04](http://www.youthedesigner.com/wp-content/uploads/2013/02/jessa-and-russ.png)
Jess and Russ’ Love Story
![Web Design Wednesday -- Navigating the web with Parallax Scrolling parallax scrolling example 05](http://www.youthedesigner.com/wp-content/uploads/2013/02/lost-world-fair.png)
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.