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

Boston’s Best Conferences for Web Designers and Developers

Boston is chock-full of incredibly talented web designers, developers, and digital marketers always looking to expand their knowledge and network with their peers.

Explained in 60 Seconds: SEO vs SEM

SEO and SEM are two acronyms that are commonly referred to during online projects. We’ve found that they are sometimes confused for one another. Here’s a quick breakdown of the differences:

After Your Website Redesign: Planning for Day Two -- and Beyond

From the outside, this is what the typical web project might look like: We have a kickoff meeting. We have a lot of meetings and do a lot of work. One day, the site launches.