November 20, 2014 | Paul Gibson

5 Examples of Excellent Parallax Web Design

Parallax Website Design Examples

My father-in-law was an avid collector of Native American artifacts. Once, he and I were looking at some items from his collection and I noticed an exceptionally well-crafted atlatl weight. It had been painstakingly polished and had an unusual, intricate shape. The stone the crafter had chosen had beautiful veining.

I commented "I wonder why they spent so much time making it so perfect. Did it improve the performance, do you think?" He smiled and said "Sometimes, humans just want stuff to look cool."

There have been lots of trends in web design that demonstrate the same obsession - everything from the early javascript "mouse trails" to Flash websites with truckloads of (usually unnecessary) animation. A few years ago, we were introduced to the newest trend: parallax web design. It has caught on like wildfire, and now you see it used all over the place... with varying degrees of success.

When done well, parallax design can communicate an idea more effectively than other forms of web design, and it meets that human need to make stuff look cool. To prove my point, I've put together a collection of my favorite sites that utilize parallax web design. What makes them great? Take a look and find out!


Water and the Dutch

Water and the Dutch

I love this site. The use of subtle parallax scrolling mixes well with other HTML5 animations to make this overview of Dutch water technology super interesting... Quite a feat for a subject that many folks consider a bit dry (pun INTENDED).


TEDxGUC

TEDxGUC  Parallax Web Design

This site pops up on a lot of "best of" lists - and for good reason! It is a perfect example of how to use parallax to tell your story. They resisted the urge to overdo it, and that's why it's one of the best.


Sony - Be Moved

Sony Parallax Website

The Sony "Be Moved" site is a heavy hitter in the design community. I have no idea how much it cost, but it was worth it. It is a marvel of design and implementation. I have a feeling that in the planning meetings, there were a lot of discussions that ended with "I don't care if it's necessary - I want people to go to this site just to see it."


The Royal British Legion

British Legion Parallax Website

There is no way to look at this site and not be happy. It's just too much fun. It communicates a serious mission, and does it with a smile. The animations aren't over the top, and they're really well done.


CableTV.com - The Walking Dead

The Walking Dead Parallax Website

Who doesn't love zombies? This "walk through" ( yes, pun #2) uses parallax to create a unique navigation experience. Also it looks amazing.

Not everybody can be Sony, but that doesn't mean you can't share your own big idea with your next website. Next time you do a website redesign, make sure you find a balance between the marketing functionality you need, and a design that communicates your unique value to visitors.

We'd love to help you get started.

VIEO Design Free Website Assessment

5-examples-parallax-websites.jpg

Paul Gibson

Paul Gibson

As the leader of our design team, VIEO Design principal and founder Paul Gibson oversees our designers and developers as they create marketing-optimized websites, digital graphics, and print materials. Paul also oversees VIEO's 3D printing division. To date, his most impressive project has been a replacement head for an old My Little Pony. He went with Yoda.

Related Post: