15 Award-Winning Examples Of Parallax Scrolling Sites.

By Craig Lowell

Mar 24 2014

Few things can make a website stand out from the masses like incorporating parallax scrolling into  the design layout. Put simply, parallax allows background, middle ground, and foreground elements on the page to move at a separate rate from one another, which when done properly, creates a 3D effect as the end user scrolls down the page.

Long a tool of animators, it took the website design world by storm when it first gained mass attention in 2011 with Nike’s Better World website, and since then has become a go-to tool in the arsenal of web designers who need an extra bit of flair to make their sites shine.

Still, despite its evolution from 2D cartoon images and into the mainstream world of website design, parallax scrolling is something that needs to be used in the proper context in order to really be effective. When utilized as a storytelling device, to engage users interactively, or as a method to enhance the presentation of a product, parallax scrolling can be a powerful tool.

With that in mind, let’s look at some glowing examples of parallax sites, and what makes them so unique in their design.

1. New York Times Tunnel Creek Story

There’s something to be said for saving the best for last, but this is the internet, where attention spans rival those of goldfish, and so I believe in putting your best foot forward. So let me say that this is the most beautiful example of parallax scrolling that I have yet to come across. It tells the story of skiers encountering an avalanche in Tunnel Creek, a section of the Cascade Mountains in Washington.

Rather than a traditional long form retelling of the harrowing tale with just pictures and block quotes to break up the text, the Times takes you on a journey through the mountains themselves with GIFs, videos, and motion maps, resulting in a one-of-a-kind experience as the reader makes his or her way through the story.

This is, quite simply, the most effective and charismatic use of

parallax-enhanced storytelling I have ever seen.

2. Flat Design Vs. Realism.

One of the most creative uses of parallax scrolling is this interactive “battle” depicting the competing ideologies of website design in 2013. After telling the story by scrolling through an animated staging, the site brings the user into an HTML5 game in which you get to do battle in the vein of Street Fighter. The real brilliance here lies in the seamless shift from the depictions of the designs themselves, which can help people see how they will look if using it as a reference to design a website.

3. The Story Of Jess And Russ.

This is one of my favorite uses of parallax scrolling, because not only does it make for a perfect example of storytelling, but it also uses the scrolling itself as a method of animation (see how the girl floats down through the picture frame near the top).

On top of that, it’s the perfect medium for parallax scrolling, because it’s a site that’s done purely as a piece of art for personal friends and family of the couple, thus nullifying one of the biggest drawbacks of using the technique – loss of SEO value due to the absence of click-through pages and meta tags. Jess and Russ don’t care if they’re not coming up on the first page of Google, because they have a perfect memento of their relationship to share with their loved ones

4. Huge, Inc.

Huge, an innovative, NYC-based digital ad agency, has a unique parallax site that shows off part of its portfolio through a slideshow-like scrolling method when you first land on the page, then transitions into a more traditional site after the initial pop. It’s obviously doubly effective when a business like an advertising agency employs methods like these, a subtle way of showing off without seeming like it’s trying to draw too much attention to itself.

5. The Walking Dead.

AMC’s hit drama The Walking Dead is the highest-rated cable show of all time, so it only makes sense that AMC was able to create a website with amazing interactive features to promote it when it first hit the airwaves. Since the show is based on a series of graphic novels, the site allows the user to explore a paneled design based on that form of artwork. The beauty of this site as well is that it also manages to incorporate other innovative website design technologies like HTML5, CSS3, Java, and audio. Combined, it’s one of the most fun experiences you can have on a TV promotion site.

6. Atlantis World’s Fair.

Built to demonstrate Internet Explorer 9’s WOFF support, The Lost World’s Fair site takes you 20,000 leagues under the sea to the lost city of Atlantis, complete with fun graphics and interesting “facts” along the way. Simple but effective, this site is a textbook example of how parallax scrolling can draw the user in and make for a fun story.

7.Nissan Note.

In the Japanese version of this car site, the user is treated to a fun little animation process due to the parallax scrolling techniques that are employed, first in the form of flickering images, and then in a sequence in which two passengers climb into the car and head off on a little drive through the landscape. It’s another example of the scrolling itself providing the animation, thus allowing the user to control the pace of the sequence.

8. Oakley Airbrake.

In an ideal example of product showcasing, Oakley makes their new ski goggle pop off the page not only through striking photography, but parallax scrolling that animates the construction of the goggle and portrays it beautifully on the page.

9. Q Music Titanic.

This is a really cool one. This Belgian radio station decided to create a website to promote its Titanic-themed prize contest for listeners with a site that uses parallax scrolling to send the user down into the depths of the Northern Atlantic in search of the wreckage of the famous “unsinkable” ship. Follow your submarine down to the bottom, encountering facts about the ocean liner along the way, to discover the wreckage on the sea floor.

10. 2011 SXSW Beer Camp.

One of the earliest examples of parallax scrolling, this site promoting the Beer Camp at the world famous South By Southwest festival shows why that expo has always been on the cutting edge. Rather than scrolling down the page, the technique employed here instead dumps the user into the page, tumbling further and further to reveal more facts about the event. If only they had managed a way to offer the beer tasting experience through the page. Maybe next year.

11. White House Iraq Timeline.

They may not be able to create a healthcare website, but the White House sure did design a website with great parallax features in its effort to educate the public about Barack Obama’s administrative efforts to end the United States’ involvement in the Iraq War. With poignant images, text overlays, and videos, the site succeeds in drawing the user in and getting its message across in crystal clear form.

12. Distance To Mars.

One of the most useful aspects of parallax scrolling is to offer a different perspective than what we’re used to seeing, and that’s put to great use here. As the user scrolls down the page, it acts as its own reference point to give a sense of perspective to how far our planet it to its closest neighbor. By imagining the Earth as 100 pixels wide, the site sends us at “three times the speed of light” through space (plenty of time for some interesting facts along the way) until we hit Mars, which is a great way to demonstrate the awesome vastness of our solar system.

13. Lexus LS.

As we saw with Nissan, cars and other modes of transportation are natural fits for parallax scrolling on a website. But unlike Nissan’s animated trip, Lexus was able to create a responsive website with a more refined touch, in congruence with its brand values. Still, the feel of traveling through the page is consistent, along with a luxurious feel via the crisp photography and polished design.

14. Mario Kart.

Anyone who played Mario Kart (or any video game, for that matter) as a kid can appreciate this effort by Nintendo to promote the release of one of its most beloved games on the Wii console. This history of the Mario Kart site lets the user relive the experience of playing the game, making it a perfect promotion for the re-release, as you follow the path of the game itself with familiar characters over the road all along the way.

15. Sony.

Finally, in the interest of ending on a high note, I leave you with one of the most amazing and unique parallax scrolling sites out there. Sony’s site promises artistry in addition to engineering, and you’d be hard-pressed to argue that this isn’t a perfect example of both. The user is treated to a veritable journey through Sony’s products, design process, and creativity as you move down the page. But frankly, words just can’t do this one justice; you really need to go and experience it for yourself.

As you can see, parallax scrolling can do more than just add dimension and depth to your site. When used properly, it becomes a vital storytelling tool that allows you to truly branch out in awe-inspiring ways, engaging your users in the process and giving them a web experience that they’ll want to come back to again and again.

Do you have any examples of Parallax sites, either of your own design or someone else’s? Share them in the comments!

Blog  /  Web Design  /  Parallax Scrolling

Comment