Parallax Web Design – Nike’s Insanely Amazing Parallax Scrolling Website

Arun Chakravarthy August 7, 2012
6 Flares 6 Flares ×

The launch of Air Jordan 2012 isn’t just about the fantastic new shoe design, it also comes with an insanely great and mind-blowing parallax web design. Nike’s parallax web design takes you to a whole new level of web browsing experience. The website scrolls through the entire flow chart of the Air Jordan 2012 design. Landing frame  “Choose Your Flight” command with directions to scroll down is just the beginning of a roller coaster ride. Once you start scrolling down, the command “Choose Your Flight”  takes off and shoes fly in from all sides to take the shape of a fighter plane. I would call the rest of it a scroll dancing experience that no one should miss. Live that experience at nike.com/jumpman23/aj2012

Nike Air jordan 2012 Parallax Web Design

What is Parallax effect?


Parallax is not a new concept to mankind. It existed ever since homo sapiens became a species and started to populate the earth. Every human being uses Parallax effect every day in their life, but most of us do not realize it. Parallax is an integral part of our vision. Human vision uses this technique to calculate distance to objects. The calculations happen at lightning speed and you will never realize it until you test it for yourself. Hold your index finger pointing up in front of you at eye level. Align your finger with something further away like a door, window or your computer monitor. Now turn your head from left to right without moving your finger. Your finger will seem to move as you turn your head. You are now seeing parallax effect/depth perception at work.


Parallax in Web Design


In recent centuries astronomy and ocean navigation has widely used this technique to calculate distance. The Animation and Video Gaming industries use parallax technique to a great extent to create illusions by moving multiple layers of images at different speed. Parallax is relatively a new technique in web designing. It’s gaining popularity as many organizations use this trendy yet elegant design approach for their websites. Parallax design approach in websites create the effect with a combination of HTML5, CSS3, jQuery, Javascript and graphic designs. If you notice the activedrinks.com site, you will see that the images, text and

Active water

 backgrounds are scrolling at different speeds. This is made possible using JavaScript and HTML data speed attribute to instruct these text and images to scroll at different speed. Vertical scroll with cursor is made possible using JavaScript and CSS.


Scrolling Methods

 

The different methods for scrolling include:

 

Layer – Different layers of images move in different directions at different speed. While some layers move automatically, some depend on user inputs.


Sprite – Combination of many images to create one single image. Using this method a flat image can be made to look like a three dimensional image.


Kavara

Repeated Pattern – Different screens/tiles are made to float over repeating background.


Raster
– Lines of pixels within an image are typically composited and refreshed in a top-to-bottom order with a slight delay between drawing one line and the next line.

If you have any questions on parallax web designing please feel free to contact us. Here are few great websites you should take a look at if you are considering a parallax scrolling website for your organization.

 

Summerhttp://krystalrae.com/

 

Tokyohttp://www.tokyu-agc.co.jp/recruit/2013/special/

 

Manufacturehttp://www.manufacturedessai.it/it/

 

Kinvarahttp://community.saucony.com/kinvara3/

 

Michaelhttp://www.michelbergerbooze.com/

 

Okhttp://www.ok-studios.de/home/

 

Tags: , ,

Comment Here