The Best Stuff on the Web - Parallax Scrolling

OHO Interactive's picture
by OHO Interactive on
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!

Further Reading

OHO Named To The Inc. 5000 List (Again)

History repeating itself isn’t always a bad thing. Case in point, OHO Interactive has been named to the Inc. 5000 for the second time.

3 Big Ideas Higher Eds Must Know About Their Prospects

We’ve just completed some independent website user research with high school sophomores to understand how they research and create a short list of colleges.

What's Missing From the U.S. Digital Services Playbook (And What They're Getting Right)

This week, the U.S. government launched the U.S. Digital Service to improve the federal government’s digital interactions with citizens.