Parallax scrolling is a growing trend in the web design community that makes websites badass. Like really, it’s awesome. Parallax isn’t new to web design, it’s actually a physics concept. It’s the effect whereby the position of an object appears to differ when viewed from different angle or position. Ok, this time in English: When you look out the window of a moving car, not everything you see appears to be moving past the car at the same speed. The trees on the side of the road are whipping by quickly, however the mountain in the distance appear to be moving slower. Even further off, the Moon over the mountains appears to hardly move at all. This is parallax, your position effects where other objects appear to be relative to you.
PHEW! Physics lesson over. Now for the web stuff.
In web design, parallax scrolling is used to make objects on screen move and pane at variable speeds as the user scrolls, mimicking the effect you see when you look out your car window. The best way to explain this is to look at some examples.
First is the website of Iutopi, a branding/design house in Buenos Aires. It shows a more straight forward, albeit no less awesome use of parallax scrolling. Check it out and then come back. Did you see how when you scrolled, objects moved at differing speeds? This effect can creates the illusion of fore, middle and background. Cool, right?
This next one is from Nike and will blow your mind. Check it out and marvel at how hard it probably was to put together. Did you scroll slowly back and forth when all the shoes are coming together to form the airplane? You should.
Finally we have the website for the iPhone app ‘Ben the Bodyguard’. It’s an app that protects your sensitive information such as passwords, notes, pictures, contacts, etc. This time the scrolling is used to tell a story. A dark, seedy story. Check it out.
Parallax scrolling can be used for a number of reasons. Iutopi used it to make their website stand out from the thousands of other design houses on the web. Nike used it to bring an extra level of kinetic energy to their new Air Jordans, a line that’s all about movement. Ben the Bodyguard used it as a storytelling device to introduce Ben and what he can do for you. At The Cyphers Agency, we’ve been playing with this technique and we think it has a lot of potential to make client’s websites stand out.
