Theory of Parallax

Today we’re seeing lot of weird (one page) scrolling website, winning awards & becoming so popular.

What are these websites & who started with this interactive technique?

“Parallax” as wikipedia defines it means: “.. a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines.” As my research went deeper, it turned out that parallax is a scientific term used in mathematics and space stuff. I won’t get further in this, lets begin with the interesting part.

In computer graphics, parallax trend was used in games, now applied on the web using Javascript & modern web standards.

Nike Better World, one of the first parallax websites created, a one page story telling website with animated visuals to understand the product better & easier than reading. The market & designers went crazy about this technique knowing the powerful advantages of HTML5 & CSS3.

Smashing Magazine has a very nice article about Who’s Behind Nike Better World:

http://coding.smashingmagazine.com/2011/07/12/behind-the-scenes-of-nike-better-world/

Advantages of Parallax:

  • Visually appealing and engaging to the users
  • Highly creative way of displaying content
  • Dynamic and responsive

Disadvantages of Parallax:

  • Complex implementation
  • Usually very large downloads and website file size
  • Slow loading
  • Issues with backwards compatibility
  • Expensive implementations

Check out these 5 parallax websites for your inspiration:

Air Jordan 2012 http://www.nike.com/jumpman23/aj2012/

Manufacture d’essai http://www.manufacturedessai.it/it/

Intacto 10 years http://www.intacto10years.com/index_start.php

Inzeit http://inze.it/

Luckily we as Novium Collective had the chance to design & create the first parallax microsite in the region featuring latest Mannequins Collection of Giscardo. Here “Mannequin Designer” you can find screen shots & demo video of how it functions.

One more thing, here is a very useful tutorial how to create parallax websites, go through & make the web beautiful!

http://webdesign.tutsplus.com/tutorials/complete-websites/create-a-parallax-scrolling-website-using-stellar-js/
Thanks for reading.

Advertisements

About Mikha

Creative User Interface & Experience Designer www.dribbble.com/mikha

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: