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:

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

Manufacture d’essai

Intacto 10 years


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!
Thanks for reading.


About Mikha

Creative User Interface & Experience Designer

Leave a Reply

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

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

Google+ photo

You are commenting using your Google+ 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 )


Connecting to %s

%d bloggers like this: