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.


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.


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.



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.


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.


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.


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!


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).



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.



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.


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.


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.


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.


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).


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.


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

    Parallax Technology


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

    Check out this great parallax scrolling page:


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

    This one is using a parallax effect with an animation indexed on the Y position :


  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 (


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

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


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


  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:


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

    We created a SEO parallax scrolling site. We are an SEO Agency in Argentina. The site is here

    Our goal with this project was to do a
    Responsive Web Design
    Parallax Scrolling
    SEO (Onsite optimization site)
    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.
    Carla Dawson


  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.
    Window Cleaning Equipment


  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!


1 4 5 6

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.