Navigation

28 amazing parallax scrolling sites

By Kendra Gaines | Inspiration, Web Design | Nov 29, 2012

The way that we that we navigate our websites is extremely important. The reason being that the user experience and the way in which they interact with the website makes or breaks the usability of the website.

If someone cannot get around on your site, then it’s useless. If someone can get around and is easily able to find what they are looking for, that makes a major difference.

In playing with navigation and incorporating that into new technologies, we’ve come across an effect widely used today. This effect is called parallax scrolling.  parallax scrolling is great, not just because it makes navigation simple, it also can be fun to interact with, and parallax scrolling is known to add depth to what could otherwise be simple, boring site designs. It provides a way to creatively interact with the content in an exciting way.

 

Parallax Websites

Today we are going to be showcasing some of these parallax websites, letting you know what’s possible, letting you enjoy the sites and their contents and hopefully inspiring you to try this technique for yourself.

 

5emegauche

They are an agency that uses a bunch of different programming languages to make their website extremely interesting. In most circumstances when you scroll, you’re scrolling to a different page. But on this website, when you go to a different page, it has its own scrolling mechanism piece or element that makes everything extremely interesting. This is a very fun site to play around with and I recommend that if you want to do something extravagant with your website, you should check out theirs.

 

Air Jordan 2012

Air Jordan are of course, extremely popular for their sneakers. This time they chose to show us the makings of their shoes in a very eye-catching and interesting way. They did a really great job of presenting this information.

 

Atlantis World’s Fair

The Atlantis World’s Fair decided to make a website that pretty much explains their purpose and their history. They used this scrolling not as just a way to present information, but as a way to animate information and to tell a story. It’s extremely interesting, it’s extremely fun, it’s interactive and informational. This is just an all around great effort.

 

Bake Agency

With many different websites you are able to use your mouse to scroll through websites. At the Bake Agency they actually use the spacebar to navigate between different pieces of information. They use this scrolling navigation more as a way to present information and they do a great job with that.

 

BeerCamp at SXSW

When you go to this website, you might be a little confused because it feels like everything is jumbled and on top of each other. If you go and continue to scroll through and click on the navigational links, you will understand that this is the way in which they decided to present and they’ve used scrolling here to bring the information to you instead of you going to the information.

 

Bounty Bev

Bounty Bev is an American-craft beer. When you think of beer, you probably don’t think of great or amazing graphics and websites are not probably the first thing that comes to mind. I think they have noticed a trend of the parallax scrolling and they’ve kind of taken that and exclamated on that point in a way in which they move from piece to piece.

 

Broadcast Creative

Broadcast Creative is a digital publishing agency in China. Again this is more of a simple idea of navigating via the scrolling and parallax scrolling. This is how you can take the simplest idea and magnify it with great design.

 

Carmilla Vampire

This is another website that uses horizontal scrolling rather than vertical scrolling for the website. Again, information is very simple, but it is magnified with wonderful design.

 

Contrast Rebellion

It’s always fun to stumble on a website that calls for a change in the way things are done. Contrast Rebellion is for web designers and they make a great point. I would suggest that many beginning web designers check this site out for this information as well as its wonderful navigation.

 

Dangers of Fracking

Much like the website Atlantis, this website uses scrolling as a way to tell a story. Its probably one of the most mind-blowing sites I’ve ever been to as well as its informational. If you have the time, scroll through this website and learn about the dangers of fracking.

 

Flight of the Fireflies

This is an extremely simple website. There is only one purpose for this site and after you scroll through it you will understand what it is. This is a very neat concept that I don’t want to give away and I implore you to check it out

 

Google Cultural Institute

The Google Cultural Institute was created to help people become aware of different cultures. They use a timeline to help people understand the different times and the different years that events took place. In this website, navigation is important because it makes it easy to interact with the timeline and interact with different news articles that encourage the education of different cultures.

 

HealthShare

HealthShare Award is a pretty simple website that uses the scrolling method. The navigation smoothly takes you to whatever portion of information you are looking for. It also brings the background to life and other elements as well.

 

Impero

Impero is another agency that has decided to use the parallax scrolling method. They are global team that is obviously interested in creating work that kind of breaks out of the norm. On this site it is evident that they use parallax scrolling as a way to animate the information they are presenting.

 

OK Studios

OK Studios has created a website that has gotten a lot of recognition because they use parallax scrolling in its simplest form to its best. If you play around on their website, you will see how this works for them.

 

Fabrizio Michels

You will see a lot of portfolio and agency websites that utilize parallax scrolling and different types of navigation. This website does so in a way where he’s able to bring the information to life by essentially using the scrolling effects by creating a bit of a moving background.

 

James Bond 007 Cars Evolution

This James Bond website showcases some of the cars used in many of the James Bond movies. The navigation here allows you to see the different cars through the creative minds of those of in charge of James Bond. It’s a fun site and it uses navigation in a way that makes presentations interesting.

 

Ketchup 

You don’t see many landing pages that utilize too many different technologies. But Ketchup decided to use it as a way to take you through the different steps of what their product is useful for.

 

 

Krystal Rae

Krystal Rae is obviously and edgy fashion line. They claim that they are bold, fun and exciting and that makes tons of sense when you scroll through their website. The do not use the parallax scrolling just as a way to present information, but they use it as a way to present their different outfits.

 

Muffi

This another agency website that mainly uses scrolling to get between each piece of information. Now, the great part about this is that at no point does this lack any sort of excitement. You have depth, you have different pieces of the website and of course you have this crazy navigation that’s mainly activated by scrolling.

 

 

Jan Ploch 

Jan is a graphic designer who obviously likes to have fun and has created a brand. Jan uses a motif of a water bottle throughout her website and even uses it to present her work. It works well with the scrolling navigation.

 

Range Rover Special Edition with Victoria Beckham

The people over at Range Rover decided to get with Victoria Beckham to make essentially what is a high fashion SUV. Who else would you rather have to represent your car? They use scrolling here to basically create kind of like a fashion catalogue and is dedicated to the luxury of the vehicle. It’s very interesting if this is what you are in to, not to mention that it is an extremely nice car.

 

Ràtatattoo

This is not really what you expect from a tattoo parlor. This is an industry where you do not expect them to put a lot of work into a website like this, but Ràtatattoo has done that and they’ve done a great job utilizing full-size images and parallax scrolling to create a fun experience which is obviously translated in their bricks and mortar business.

 

Soleil Noir 2012

This agency wants wants you to believe in yourself in 2012. It sounds a bit like it is cliche, but as you scroll through the different panels, you will understand what it is they are calling you to do. This is actually one of the most interesting websites that I’ve seen. They did a really great job with everything.

 

 

SON

SON is an advertising agency that is obsessed with quality and movement. They’ve used many different ways of movement to create their website. And it’s a wonderful website.

 

 

The Honors Society

The Honor Society website was chosen because you do not see many underground artists that have what we believe to be a good enough website. Most artists use what is free or they don’t do a lot of fancy things on their website. The Honor Society has a wonderful site from top to bottom and they even used scrolling to present information.

 

Tomas Pojeta

Much like the Broadcast Creative website, this website uses the scrolling and extremely detailed, beautiful illustrations to create a wonderful website design experience.

 

Carp Vlad

This is a website that instead of scrolling vertically presents its information horizontally. If you ever attempted to make a website like that, you know that horizontal scrolling is not easy. In that, this website is simple but he uses the scrolling method to create a bit of difference and elemental surprise on his site

 

Did we miss any of your favourites? Have you designed any sites using parallax scrolling or do you take a different approach to navigation? Let us know in the comments!

Share this post
Comments (no login required)
  • http://www.yellowduckwebdesign.co.uk Web Design Essex

    Wow, some truly amazing sites there.

  • Nicola Cadenelli
    • http://twitter.com/JackNycz Jack Nycz

      That is pretty awesome!

  • http://www.onitsolutions.co.uk Jon Celeste

    wow. Really super designs guys. Loving the Atlantis World’s Fair

  • http://www.webstilo.hu/ Csaba Cserepes

    Uhhh… I love them!!!

  • http://twitter.com/tonytiger anthony van de Veen

    http://www.mobydigital.com and especially their skills page is cool!

  • Rob Newell

    Whilst these sites do indeed scroll, a functionality that has been inherent on almost all sites since the dawn of html, none of them incorporate a parallax aspect. The scrolling is well delivered on some of theses sites, with nice graphics, but I think, perhaps, that Kendra Gaines should have at least googled the subject of her article before writing it.

  • http://www.facebook.com/oettingerdev Matt Oettinger

    Darn, was hoping mine would have made it to this list: http://www.verisigninc.com/dns

  • steve w

    Gee…I miss Flash. Sigh!

  • georgerobinsonkitchens.co.uk

    I just wanted to thank you and say what a great list of websites you have put together here. As a web designer and a amateur photographer I love the beauty of design, including different shades of vibrant colour that can be found in one simple design.
    I have not checked out all these sites but I am more than half way through them, thanks again.

  • hosein

    wonderfull designs!

  • greynor

    Sorry, but “The Honors Society” and “Tomas Pojeta” really have nothing to do with parallax scrolling. The other ones are great. But the best one clearly is the one from Nicola Cadenelli’s comment.

  • http://www.facebook.com/brandon.wimberly.5 Brandon Wimberly

    This is an outstanding post. Thank you. One more for inspiration: http://www.vondutch.com

  • Vertical Conservatory

    Hello !
    this is a very nice post .I just wanted to thank you and say what a great list of websites you have put together here.
    thank& for given your valuable time on this post .

  • JohannesNeumeier

    http://www.bakeagency.it/ ‘s works section actually doesnt show content on OSX latest FF. Some of the examples here don’t use parallax at all, others don’t use it in any particularly interesting way.

  • http://markrojas2.blogspot.com/ Mark Rojas

    Thanks for the great list, lots of inspiration here.

  • G0nzo

    What a dynamic, dispite the fact of the design, perfect compositions btw, i love the dynamic of all the pages…great scripting! wish i could do that! & thanks for the inspirations! :)

  • http://www.facebook.com/dorph0 Rodolfo Ramos

    Here is my contribution for the list: http://anu.bz