Parallax Scrolling Brings the Pazzaz

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?

Parallax Scrolling

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.

share this post:

related posts

How to become an industry leader on LinkedIn

LinkedIn has evolved as the preferred platform for professionals seeking to network, share knowledge, and position themselves as thought leaders. With over 700 million members, ...

Last Minute PR: Your Guide To Promoting An Event The Day Before 

In an ideal world, you should start promoting an event at least two weeks in advance, but we all know sometimes things don’t go as ...
see more posts

Subscribe for our latest news, marketing tips and advice