The Best Stuff on the Web - Parallax Scrolling

August 07, 2012

Hey there and welcome to a new series we're putting on the blog: The Best Stuff on the Web.  In this series, we'll cover the best websites, design concepts, development trickery, and other fun bits we've seen across the web.  It's worth noting the things we'll discuss are not OHO's own work, but rather the stuff we've seen that makes us proud we work on the web.  You'll see a number of posts like this for the conceivable future, but this is our inaugural post so let's get things started.

So what are we discussing this week?  Parallax Scrolling.

If you're like us, you've probably come across a webpage that seemed inordinantly tall, right?  No, I am not talking about a lazy loading infinite scroll site like Facebook's news feed.  I'm talking about a page that, as you scroll, loads different animations and content changes that are tied to the scroll.  Like a zoetrope laid out vertically.  With us?  Good.

Well that's parallax scrolling.  With its roots in video game background animations, parallax scrolling uses just HTML and CSS (no Flash - hooray!) to create a sense of depth to the content.  It's a simple concept in theory, sure, but whoever first thought of it as a way of inspiring the user to interact with the page contents without forcing the masses to use an ages-old plugin is bloody brilliant.

Here are a few parallax scrolling sites that just blow our minds (don't forget to scroll!):


The Volkswagen Beetle for Germany

A highly clickable, nostalgically-driven lookbook at the newly redesigned Beetle that does everything a car model lookbook does but better?  We know what our next car is going to be...


Ben the Bodyguard

The noir inspired visuals and wonderful color pallate are enough to draw us in, but the best part is as Ben casually walks his crime-riddled streets, a grimy, Bensky-tagged subway passing overhead and heinous acts happening all around him, you can't help but wonder: "am I playing Grand Theft Auto?"  Talk about immersive.


Samsung Galaxy S II

So what if the Galaxy S 3 is newer, sleeker, and probably better?  The microsite for the S 3 pales in comparison with this stunner for the S II.  The visuals are bigger than life, the elements have that slow rise that reminds us of Willy Wonka's fizzy lifting drink, and you really can't leave this page feeling uninformed.  A win.


Grey Goose

Another win for the "parallax sites are beautiful" category.  We don't love the nail-biting experience of "maybe this link will open here, maybe it'll take me off-site" provided here, but the lush visuals and "holy crap how'd they get so big?!" YouTube embeds are stunning.  Don't forget to click the menu buttons along the bottom (an incongruous place, but we like it) to see that it's not just the landing page: nearly the whole freaking site is parallax!


Other Examples

These sites have some great other examples of parallax sites that we don't have the space to cover but are worth checking out:

As you can imagine, there are tons and tons of parallax sites across the web (as this design concept is gaining momentum rapidly) so we're sure to have missed a few good ones.  Think we missed a parallax scrolling site that's worth an honorary mention or think parallax scrolling is yesterday's news?  We want to hear about it!

Related Reading

5 Ways Website Personalization Can Fix Your College Enrollment Problem

Did you know of prospective students who complete applications, only 15% apply on their first visit?

Healthcare Infographic: Marketing Medicare to Baby Boomers

Baby Boomers make up more than a quarter of the population of the United States.

What Higher Ed Marketers Need To Understand About Prospective Students

Higher education marketers are constantly trying to get into the brains of prospective college students.

The One Metric That Proves College Websites Are Worth the Investment


That’s the number of revenue-producing business metrics most college and university web marketing teams use to prove their impact to the school’s bottom-line. Zero. Zilch.