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


Meet Our New Digital Marketing Coordinator, Loveneet Kaur

Hey there, I’m Loveneet Kaur and I have recently joined The Cyphers Agency as a Digital Marketing Coordinator, and I’m beyond excited to be part ...
Grain Foods Foundation-Come to the table

Typography in Web Design: Choosing Fonts for Readability and Aesthetics

When you are planning the typography in web design, you need to consider where to start, how it should look, and how easily it can ...
see more posts

Subscribe for our latest news, marketing tips and advice