Video games often use parallax scrolling technique to create an illusion of depth by moving multiple layers of images at different speed. This technique can also be applied in web design. This post consists a list of mind blowing parallax scrolling sites, design tips, and resource tutorials. If you are considering to start a parallax scrolling site, this is a must read post.

Nike Better World

Nike Better World is probably one of the early sites who started this parallax scrolling trend. Still looking good.

screenshot

Smart USA

As you scroll down the Smart USA site, the elements zoom to you. What is really impressive is they managed to maintain the similar look and feel in their mobile version. Most parallax scrolling designs don’t play well on mobile devices. Having a separate version is a smart idea.

screenshot

Ben The Body Guard

Although the perspective seems very wrong (it doesn’t feel like a bird’s-eye view) on Ben The Body Guard, but having a character and trian runs across the scene is pretty cool.

screenshot

Laurentius

I don’t understand Dutch, but browsing on Laurentius site was very enjoyable. You can scroll through the slideshow with mouse scroll wheel, scrollbar, navigation buttons, or arrow keys. I particularly like the slide between 4 & 5 where the butterflies flew out the scene randomly.

screenshot

Mario Kart Wii

Mario Kart site gives you the same kind of experience as if you were playing on the Wii. It is fun to see the carts move on the track. Notice when you try to scroll down on the last slide or scroll up on the first slide, the graphic elements shake to create the effect of braking.

screenshot

Moods of Norway

Moods of Norway truely depicts the beauty of a city line in a parallax scrolling tour. It takes you from the country side to the urban city in different lighting and season. I thought it is a travel site, but it turns they are a product site (LOL). Don’t forget to check the site on your iPhone. It displays a sweet message when you are viewing in portrait mode. You can swipe through the scenes in landscape view.

screenshot

Art of Flight

Like the Mario Kart site, Art of Flight provides the same experience as if you were flying in a helicopter. It gave me a headache (in a positive way) from watching the elements flying around the scene. Very well done!

screenshot

Smokey Bones

Beside the parallax scrolling on Smokey Bones, I like the bottom of the site where you can break the balls and play pool (well, sort of).

screenshot

BeerCamp

BeerCamp doesn’t have the stunning images like most of the parallax scrolling sites, but it is very well executed. Everything is laid on the screen. As you scroll, the design zoom in layer by layer.

screenshot

Beetle

Make sure you are on high speed connection to check the Beetle site because it is very graphic instense. The scrolling at the beginning is put together with image by image like keyframe animation.

screenshot

New Zealand

The scene design on the New Zealand site is breath taking — beautiful and high resolution imagery. However, this beauty costs some load time and graphic resources.

screenshot

Activate Drinks

Among all the sites on this list, I think Activate Drinks has the best pre-load idea. First it shows you a nice loading animation and then the cap on the bottle starts turning as you scroll.

screenshot

Gidsy – Making the Perfect Listing

This "Making the Perfect Listing" page is nicely put together with just basic color and shapes. Scroll and watch the shapes merge together.

screenshot

Things to Consider

If you are thinking to design a parallax scrolling site, here are some factors you should consider:

  • Preload the graphics: if your design is very graphic instense, preload the graphics before loading the site. This will give the user more seamless experience.
  • Mobile devices: pay extra attention to mobile devices because users might not get the same experience as the desktop browsers.
  • Viewport sizes: be sure your scene works on various viewport sizes (small, medium, large).

Tutorials

Here are some tutorials that you might find useful:

Thanks to Twitter Followers

Lastly, I would like to say thanks to all my followers @nickla who tweeted me some of the parallax scrolling sites.

111 Comments

1 4 5 6
  1. Baltic Condition
    Aug 10, 2012 @ 9:01 am

    Parallax Technology

    Reply

  2. Tough Toys - 4wd Accessories
    Oct 9, 2012 @ 1:41 am

    Check out this great parallax scrolling page:
    http://www.toughtoys.com.au/tough-tracks/

    Reply

  3. BlackPaper°
    Oct 9, 2012 @ 10:30 am

    This one is using a parallax effect with an animation indexed on the Y position :
    http://www.chamane-energydrink.com/

    Reply

  4. Web Design Inspiration Today
    Oct 9, 2012 @ 10:44 am

    Nice collection, I may add some of them to WDIT collection. Everyone have a look at WDIT collection for Parallax Web Design Inspiration (http://webdesigninspirationtoday.com/design/style/parallax)

    Reply

  5. Vindision
    Nov 25, 2012 @ 9:04 am

    Hey
    Great Innovations!
    I recently came across this website for a web development company, it had some pretty awsome scrolling effects too http://unicod4.com
    I guess Javascript is finally providing better animations then flash now.

    Reply

  6. Mixerowsky
    Nov 26, 2012 @ 3:14 pm

    Reply

  7. Jess Samuel Smith
    Nov 27, 2012 @ 10:08 pm

    One of the best lists so far. This sites are inspiring! Here another nice example with a great smooth scrolling interaction: http://www.drugtreatment.com

    Reply

  8. Carla Dawson
    May 30, 2013 @ 2:00 pm

    Hi
    We created a SEO parallax scrolling site. We are an SEO Agency in Argentina. The site is here
    http://www.posicionamientowebenbuscadores.com

    Our goal with this project was to do a
    Responsive Web Design
    HTML5
    Parallax Scrolling
    SEO (Onsite optimization site)
    CSS3
    Wordpress site.

    We think we did a pretty good job. Its not perfect but most parallax scrolling site do not have SEO. And very few SEO Agencies have parallax scrolling sites. We have yet to find one. Let me know if you do.
    Thanks
    Carla Dawson

    Reply

  9. Window Cleaning Equipment
    Jun 1, 2013 @ 6:43 am

    Hey !
    I am speechless after watching the parallax scrolling sites. These are no doubt simply mind blowing. Specially Mario kart is awesome to scroll down.
    Thanks.
    Window Cleaning Equipment

    Reply

  10. Brian
    Jun 9, 2013 @ 11:27 pm

    Yes! I do remember that Nike Ad scrolling type! Like some kind of videogame in the 80’s! LOL!

    Reply

1 4 5 6

Leave a Reply