Parallax 101

Parallax sites have become something of a phenomenon over the last couple of years, featured on every ‘web design trends of 2015’ list and gaining momentum every day. Their popularity began to boom back in 2012 and shows no signs of slowing down, though there is a lot of confusion about what a parallax site really is.

Isn’t a parallax design just a scrolling site?

In short, no. Scrolling is an element of the design but you can’t create any old scrolling site and whack the parallax label on it.

Okay, so what is parallax?

Parallax is the name for a visual effect that originated from 2D scrolling video games that utilised different image movement speeds to create the illusion of depth of field. Although the technology used is different, the same basic concept applies to the design of a parallax website: the background moves at a different speed to the rest of the site, creating an eye-catching visual illusion.

I see, but what makes it so popular?

First and foremost, a true parallax design inspires a sense of wonder and curiosity that viewers can’t ignore – pique somebody’s interest with your unique web design and they’ll likely be back for repeat visits.

One page scrolling sites have increased in popularity for numerous reasons, including the ability they have for taking viewers on a journey as they browse the site. Rather than clicking from one page to the next, a well-designed parallax site will guide users through the site and encourage them to scroll from top to bottom, increasing the length of the visit and ensuring they take in all of the information you present on your site.

Are there any negatives?

A few, though the benefits far outweigh the negatives. Users after a certain type of website should bear the following in mind, though:

– A scrolling site that utilises numerous images or video clips will see slower load times. This can lead to visitors clicking away out of frustration before the page has had a chance to load.
– Your SEO may suffer. Having only a single page means you can’t capitalise on some of the usual SEO goodness, including internal linking, h1 tags and meta information.

I’m sold, how do I get one?

Do your research – seek out a knowledgeable, experienced agency and speak to them about your needs. See if they have a developer who has prior experience at creating parallax sites – look at their previous work and see if it inspires you. Agencies with a proven track record in creating parallax sites include Madwell, Forbi and The Rex Studio.

Ensure that your design isn’t too complicated – the parallax element is impressive enough, without adding extra bells and whistles that can make the design elements get lost.

Bear browser compatibility in mind – the last thing you want is for your design to only work on certain devices, so make sure your site performs just as well on a mobile phone or an older browser.

Make the most of it – a parallax design gives you real control over the way your visitors browse your site. Use the design to tell a story and guide users towards strong calls to action.

Can I see one in action?

There are some seriously impressive parallax designs out there, and these are just a couple of our favourites:

Mario Kart Wii Experience – known as the reigning overlord of commercial parallax designs, this site combines every positive into something truly unique and special.

Wildlife.la – Combining strong visuals and stunning design elements with a classic parallax illusion, this is a fantastic example of how striking a parallax site can be.

Hot Dot Production – What’s really interesting here is the use of a vertical scrolling site, which is largely underused. It gives the site a slick, fresh appeal and the parallax effect is great.

Some of our favourite true parallax themes out there include:

UP – ‘True parallax effect with 4 layers moving in different speed adds another dimension to the site. It is also responsive, looks beautiful on every screen. UP is recommended to creative people, freelancers and agencies.’

Zerif PRO – ‘Create memorable pages with smooth parallax effect that everyone loves. Upload images into section, put some elements like text, buttons and enjoy a great looking section.’