On Parallax Scrolling Sites

05 Jan 12

Yesterday, some colleagues and I were bandying about the URLs of a few Parallax Scrolling sites as sources of design inspiration. They’re the sort of sites that have been cropping up in the past year that do funky things as you scroll through them. Like this, that, and these over here. I’m not going to give a tutorial on how to build them—you can find those elsewhere. Instead, I want to focus on the the choice of whether or not to use parallax scrolling as a design tool.

These sites are impressive, and I deeply appreciate the design and craftsmanship that go into putting them together. All of the examples I linked to above are absolutely top shelf in their execution. Not only that, but the fact they exist at all point to new avenues that we as designers and developers for the web can explore as we further our skills and expand our vocabulary for communicating our (and our client’s) ideas.

Having said that though, as I looked through them and others like them as a group, I couldn’t help but feel that they all trying to grab you by the collar and scream “hey look at what I can do! Aren’t I neato?!?”. They seem to use the parallax scrolling technique simply because they can. Because it’s clever. Because it’s cool.

While it’s still a relatively new technique, I began to feel that parallax scrolling is already tired and overused, even though it’s only employed on a handful of sites that I’ve come across. I believe the problem is that the choice to use this technique doesn’t really serve the content well in any of the examples above.

The Comp. (Not the Photoshop variety)

I’m reminded of the time I was in music school, studying Jazz guitar. I was in a small ensemble class, where we split up into 4 or 5 piece groups to practice and perform a different Jazz standard every week. As a guitarist, if I wasn’t soloing or playing a melody, I was expected to comp—that is, to accompany—the soloist. The same went for piano players. In order to comp well, you really have to listen to what the others are doing and play something that supports them. After a performance one week where I was paying more attention to my own playing than I was to that of the others in the group, the instructor (the great Miami area pianist, Vince Maggio) said something to me which has stuck with me since. He said, “the best comping is the comping you don’t notice.”

It took me some time to really understand what he meant by that, but I came to realize that comp doesn’t simply mean accompany, but really, to compliment. It’s a selfless thing, and the best comping is not only something you shouldn’t notice, but it makes the soloist you’re accompanying, nay, complimenting, sound their best.

Back to the Parallax

To apply this back to the web and our original context here, I like to think of a site’s content as the soloist and the parallax scrolling as the comping. Given this analogy, perhaps the best use of parallax scrolling is the original Ben The Bodyguard promo. If you’re familiar at all with parallax scrolling sites, you’ve surely seen it already, but have another look just to refresh your memory. In it, the scrolling interaction doesn’t blatantly draw attention to itself, as it does with the other sites. Instead, it helps to tell the story of Ben in a novel, linear way. It compliments Ben’s story, and because of that, it works well.

Parallax scrolling is, of course, another tool in our web craftsman’s toolbox. Sometimes, the hard part can be knowing when to use it over a different approach. Remember, in the end, we do what we do to serve the content, and if parallax scrolling does that, then have at it. If it’s just something to do because it’s neat and shiny, then dig deeper. In that case, there’s likely a different approach compliments the site’s content better.

©MMII—MMXIII Michael Bester