• Web Design

Creative Parallax Scrolling

Parallax scrolling is a technique used in computer graphics that creates an illusion of depth in the 2D image. Essentially, the background scrolls by more slowly than the foreground does, mimicking the way things which are far away seem to move more slowly than things which are closer.

Although this is associated with computer graphics, the technique has its origins in the 1940s, when animators used the multiplane camera technique to add depth to their images. In that technique, the animators would draw the background and other animation elements on separate panels. The panels would be layered over each other in a contraption that kept the panels separate, and they would be pulled or changed, then photographed. By allowing the panels to move independently, the animators could create an effect that made it look like things were moving at different speeds. This was perfected in Disney’s Snow White and the Seven Dwarves, when the evil witch drinks a potion which makes the things in the room spin around here.

In the 1980s, computer games developers wanted to bring that same effect to their artwork, so they developed parallax scrolling, where the foreground, middle ground and background move at different speeds to give a sense of depth. This technique became popularised after its use in the game Moon Patrol.

The path and rover in the foreground moved at a different speed to the hills in the middle ground and the mountains in the background, which, although it looks simple enough today, was truly revolutionary in the early 1980s.

Today, a generation of developers and designers raised on computer games and other digital graphics have applied the parallax scrolling technique to websites. Read on to see some of the most creative parallax scrolling websites on the internet today.

***

Spotify

This subtle use of parallax scrolling has the selling points of Spotify scrolling over images of where and when people use it, which themselves scroll more slowly behind the text.

***

Beer Camp at SXSW

On this website, pressing the down arrow on your keyboard means the next page comes up through the square in the middle of the page.

***

Iutopi

Spanish creative agency Iutopi uses some very sophisticated scrolling in its web design. It is especially impressive when the school of fish overlap and mix together, giving a real sense of depth.

***

DrugTreatment.com

This website uses parallax scrolling to quietly emphasise the design, which reflects the feeling many people who are addicted to drugs feel. The website is there to support those people, so it is a crucial message to get across.

***

TokioLab

The TokioLab website uses parallax scrolling to squish words together, make them spring up and have them pass in front of the background, which emphasises the creative nature of the group.

***

The History of Mario Kart

It is befitting that a mini site dedicated to the history of one of the best examples of parallax scrolling in computer games would itself use the technique.

***

Bomb Girls

The website for this Canadian television show uses parallax scrolling to give the impression of being in the club much of the action is set in.

***

Ben the Bodyguard

This website caused a sensation when it was publicised in 2010. The digital community went nuts talking about the interactive website, which drove sales for the password protection app.

***

Soleil Noir Believe in 2012

Design studio Soleil Noir wanted to encourage people to believe in themselves in 2012, so they created this mini site. It uses humour, design and parallax scrolling to create an impact.

***

Von Dutch

This site uses the technique to make new images pop up almost unexpectedly, creating a surprisingly rock and roll feeling.

About the author:

At Clickinks.com, Julie works in marketing and ensures everything runs in a timely manner. She looks after all design and marketing related issues. Follow Clickinks on twitter.