The Good & Bad of Parallax & Scrolling Effects in 2015

Parallax and scrolling effects have come a long way over the years, turning the mundane act of reaching the bottom of a webpage into a more immersive experience. At least that’s the theory and probably what many designers have in mind when they envisage their cinematic journey from header to footer.

Things are very different in practice though and it’s difficult to find parallax designs or scrolling effects that go beyond superficial visuals and actually add to the overall user experience. So, with that in mind, let’s take a look at the good and bad of parallax and other scrolling effects, as they stand in 2015.

 

The touchy subject of parallax design

Parallax is a divided topic in web design: on one hand you have the argument it poses too many UX concerns and technical problems, while parallax fans will insist many of these aren’t symptoms of parallax itself and we can’t solve the ones that are without exploring it further.

The parallax pros

  • Visual impression
  • It shows your brand is ‘cutting edge’
  • The chance to create an immersive story on your page
  • The interactive element can grasp user attention

Essentially it all comes down to engagement and the aim of parallax design is to turn static pages into a more immersive experience – and it really can, when it’s done well.

The parallax cons

  • Heavy code and loading times
  • Mobile performance
  • Confusing navigation
  • And a whole bunch of other UX concerns

The dark side of parallax mostly revolves around the impact on user experience – especially across multiple devices – and there are way too many of them to squeeze into a single list. Sadly, it’s very difficult to find a parallax design that doesn’t fall victim to one or many of these UX pitfalls – but it can be done.

Misconceptions about parallax

You’ll notice the title of this article reads parallax and scrolling effects, because the two are different but often get mixed up. Parallax moves multiple layers at different speeds to create a sense of depth, but not all scrolling effects you’ll see in this article or across the web are parallax.

There is also the common criticism that parallax is bad for SEO because it involves single page design. This isn’t entirely fair, because no rule says parallax only applies to single page websites – that just happens to be a common trend.

There are, however, potential SEO concerns with with using JavaSrcipt to load content for dynamic, progressive or other loading techniques. Search engines are constantly getting better at index JavaScript content though and let’s not pretend parallax designs are the only ones that use these methods.

That’s enough about the pros and cons though, so let’s dive in and start looking at working examples of the good and bad of parallax design and scrolling effects.

 

Rock & Scroll examples

Here we have some of the fanciest scrolls and parallax designs from around the web and perfect examples of how impressive they can be, but also how performance can suffer as a result.

Cable TV’s Walking Dead

parallax example - zombie

Cable TV’s Walking Dead scrollathon is a horizontal stroll behind the scenes of the popular zombie show and it’s a visual treat for sure.

Unless you visit on mobile, of course, in which case you need to be psychic for two reasons:

parallax example - zombie mobile

First, to guess how long you have to wait for the loading screen and what half the text actually says.

 

 TEDxGUC

parallax example - ted

TedxGUC takes us on a vertical journey this time, depicting the path of innovative ideas. Parallax certainly has that innovative feel to it and the result on desktop is impressive once again.

Try to show your friends on mobile though and you’ll be welcomed by impossibly small text, glitchy scrolling and navigation so tiny you’ll be hard pressed to see it, let alone use it.

 

parallax example - ted mobile

 

Basically, it’s a mobile UX nightmare, but then again it’s a site aimed at tech-savvy students and they probably never use smartphones anyway (please, don’t quote me on that).

 

Danger of Fracking

parallax example - drop

I don’t want to focus purely on mobile in this article, because parallax problems aren’t unique to the smaller devices in our lives. This effort, entitled Dangers of Fracking, is a perfect example and performance on the laptop I used was far from great. No load times got things off to a promising start, but some vertical scrolling revealed fixed widths and positioning that don’t seem to like 11-inch screens – once again calling on my psychic powers to read text.

Needless to say things get worse still on mobile and my truck went on a violent rampage through time and space. It turns out fracking is even more dangerous on mobile.

 

parallax example - drop mobile

 

Happy birthday Game Boy

parallax example - gameboy

Here we have a landing page that claims to celebrate the Game Boy’s 25th birthday, but actually promotes a parallax tutorial course (marketing skills). It’s pretty flawless on desktop too, although Petr has opted to cut mobile out of the equation altogether.

It may seem worse to completely ignore mobile, but I personally prefer the idea of not doing something if you can’t do it properly.

 

parallax example - gameboy mobile

 

Petr’s audience is clearly desktop users (you’re not going to build parallax on mobile) and, while there could be more done with the mobile version of this page, he’s clearly basing decisions on his goals, audience and performance – as we all should.

 

Scroll for your health

parallax example - fruity

This portfolio example from Shibui.me is precisely that: a portfolio piece to showcase agency skills. So many UX talking points (like navigation, for example) don’t apply here – and the result is pretty damn good, even on mobile.

So what points can we raise from this example? Well, try the site for yourself on desktop and mobile to compare the scrolling.

 

 

parallax example - fruitmob

 

One of the biggest criticisms of parallax and is it ‘hijacks’ the browser’s natural scroll and the impact on touch devices is debatable (so see what you think).

 

Examples that work on mobile

Now let’s take a look at some examples that make a success of parallax and scrolling effects on multiple devices. Spoiler alert: these sites typically address the fact that parallax simply doesn’t work across multiple devices.

O3 Creative

parallax example - create

O3 Creative opts for some fixed backgrounds and text animations (not parallax) to jazz up scrolling and it’s a classy effort – smooth, subtle and void of any pretence.

The fixed position backgrounds don’t feature on mobile though (patchy performance) and O3 Creative relies on the text animations to add that touch of movement.

 

parallax example - wearemob

 

Whiteboard

parallax example - whiteboard

Creative agency Whiteboard takes a similar approach, this time using a fixed video background to capture the power of moving visuals. And aside from some odd positioning on the header desktop performance is seamless.

Moving on to mobile the video background is still there, but we have a much shorter clip of lower-quality footage and a darker overlay to maintain performance.

 

parallax example - boardmob

 

Why your Brain Craves Infographics

parallax example - info

This infographic from Neomam.com mixes some parallax backgrounds with animations to bring the page alive on desktop and its a cracking piece of work.

You won’t find any parallax on mobile though; only a few subtle animations remain, but their subtlety still adds a great deal to an already impressive visual feast.

 

parallax example - brainmob

 

Green Man

parallax example - greenman

Stepping away from parallax once again we have Green Man and I’m kind of cheating on this one, because the only scroll effect at all is two fixed position elements at the bottom corners of larger screens.

And once you drop below a 550px display the two elements completely disappear, along with any scroll effect whatsoever.

 

parallax example - greenmob

 

Yet the site still looks cracking on all devices I can visit it on – proving parallax and scroll effects aren’t the only way to make an impression.

Bake

parallax example - bake

The homepage for digital agency Bake is an interesting piece of work that tries to break away from scrolling as we know it. There are a few quirks, but I think it largely works by keeping things more simple than they perhaps appear and the overall user experience is surprisingly good on desktop.

 

parallax example - bakemob

 

Navigation takes a bit of a hit on mobile, which is a shame, but it just about gets away with making alternative scrolling work and the transitions are seamlessly smooth.

 

Using parallax design and scrolling animations

Pretty much all the examples that work across multiple devices either don’t use parallax at all or reserve it for more powerful devices. The fact is parallax on mobile is a mess and even on desktop the vast majority of examples are either pointless or a headache to use.

Parallax and scrolling effects have made the web a more visually impressive place, for sure. Or at least they would have done if overly keen designers and website owners weren’t tripping over each other to create parallax sites for the sake of it.

There’s nothing wrong with parallax when it’s used to add to the overall web experience and it can work when it’s done properly. The problem is it gets overused to the extent it’s causes more harm than good and getting a bad name for itself – which is our fault, not the design concept.