Five killer ways to use parallax

This article first appeared in issue 228 of .net magazine – the world's best-selling magazine for web designers and developers.

There are many ways to add depth and richness to your website designs. The Parallax technique of scrolling two or more different image elements across different site lines has become one of the most popular methods for delivering depth and movement on websites.

You can add visual interactivity by having this movement follow your mouse slightly from left to right as you move around on a screen or you can use the vertical scrolling built into every page to create a rich experience for the user as they make their way down your page.

Entertain

The way to really get this technique working in a big way is to not just use the visual trickery for the sake of looking cool but to work the effect around a narrative or story.

What people want is to be entertained; whether we like it or not, they want a story. Involvement or buy in from the visitor to your website is the ultimate prize and we can do this by giving them something to dig into with not only their eyes but their minds, so to speak.

Narrative

It’s important to know that narrative in web design is a real thing: whatever you do to design for it, a visitor making their way through your website is experiencing it from you. An effect that amplifies it is only going to make it more important that the narrative you’ve created is a good one.

Think about a website that is memorable to you. It’s highly likely that what you’re remembering is the narrative built around the great visuals.

Five examples to check out

1. Nike The website for Nike’s PR message – to help create a better world by the way it produces items – uses a strong narrative to show how this happens, by mixing it with great vertical scrolling parallax imagery.

2. Beercamp The interactive studio nclud throws a party at SXSW each year; it created this site for 2011’s event. It scrolls images and type from within itself.

3. Campaign Monitor When the email marketing app Campaign Monitor decided to start hiring new employees they created this vertical scrolling parallax based website to show off what it’s like to work there.

4. Smokey Bones The restaurant chain Smokey Bones’ website uses the parallax effect to sell the experience of dining at their establishment.

5. Movember The website for the fund raiser event for Movember is largely just a big invitation card, but the invite unfolds as you scroll down the page and find out more details about the event, right down to the ticket purchase.

Discover the best free web fonts for designers, over at Creative Bloq.