Okay, okay, it’s a well-repeated opinion by now: parallax scrolling* can easily be overdone. In fact, if you think you’re overusing it, chances are that you’re overusing it. Sure, it was cool when it first started popping up, probably out of sheer novelty. But the truth is that parallax scrolling can be distracting—even disconcerting—to the eye, without adding anything to the user’s experience.
Most designers are in agreement about that and will use parallax elements sparingly. We used parallax on our old site to accentuate the headings of different sections (my entire site is on one page, so it helps to make those different sections, which might otherwise be separate pages, a little bolder). But I try not to overdo it. I want the parallax to feel natural, subtle, and innocuous—as most designers who use the effect do.
But on some sites, parallax scrolling (even in great amounts) just feels right.
Why? For the same reason that parallax can be a problem: it’s distracting. Therefore, on sites that are trying to distract, busy sites meant to inundate the user, this can actually be perfect. In these instances, parallax can not only add to the busyness of a page, but it can help control the page’s elements as the user scrolls, meaning it becomes part of the user’s navigation of the content.
So let’s get to some examples…
Really neat style from this Dutch site, which employs parallax to control the many elements (including wood-block textbook images of veggies).
Uses parallax to emphasize the headers to each section, similar to my own site.
Stylish alternative to a portfolio page or pdf and probably more fun than flipping through static pages, this site uses parallax to control a jumble of elements, both adding to and moderating the busyness of the many colors and patterns of the page. Not only does it give a semblance of order to the chaos, it also guides the user through the content in a fun way.
This is another visually overwhelming page with some really cool imagery. Here the parallax is used to make significant elements, like text, stand out from that busyness, which becomes like a background.
Sometimes, the use of parallax scrolling makes viewing a webpage more like taking a trip than scrolling down a page. As parallax uses have advanced, they’ve replaced what might have been done a few years ago through Flash. Quicker and more responsive, parallax can be employed to move elements on the page such that the user feels as though he or she is guided along some path. The best of these are really impressive. Here are just two examples…
* “Parallax scrolling” probably isn’t the best term, since what we mean is animating elements in such a way that, as the user scrolls, they change attributes. In other words, beyond simply creating a parallax effect, we’re taking about elements totally changing style or position as the page is scrolled.