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

Breon
Nov 18, 2011 at 12:20 am

We rolled out a parallax site this past summer. I especially like the ‘lock’ (you’ll know it when you see it)
http://www.crashplan.com/business/overview.html

Dan
Nov 18, 2011 at 5:51 am

That is nice man. Great job!

呜摹邓
Nov 18, 2011 at 1:46 am

博客做的不错,欢迎回访啊

Christian
Nov 18, 2011 at 2:39 am

Die Seiten von Smart und Art Of Flight gefallen mir.

DSM
Nov 18, 2011 at 3:56 am

Its really amazing

Wolverhampton Web Design
Nov 18, 2011 at 4:08 am

Incredible. It’s hard to choose a favourite.

We’ve been in awe of parallax scrolling since we got our hands on “Shadow of the Beast” on the Amiga!

Wolverhampton Web Design
Nov 18, 2011 at 4:08 am

Incredible. It’s hard to choose a favourite.

We’ve been in awe of parallax scrolling since we got our hands on “Shadow of the Beast” on the Amiga!

Sagar Ranpise
Nov 18, 2011 at 4:18 am

Nice set of sites! I too have created a set for parallax scrolling sites.
I hope you like it!
http://www.alldesignstuffs.com/2011/inspirational-websites-set-2-with-latest-vertical-parallax-scrolling-technique/

adumpaul
Nov 18, 2011 at 4:39 am

Nice collection of Parallax Scrolling Sites .Thank you.

Paul
Nov 18, 2011 at 5:03 am

Here’s another for you, one I worked on for Samsung. http://screenforallreasons.com/

Beben Koben
Nov 18, 2011 at 5:24 am

ck ck ck ck \m/

Dan
Nov 18, 2011 at 5:52 am

Gotta say I love the Smokey Bones website the most. Pretty much every element of that site I like. The others are great too, but that one was nice.

Henrique
Nov 18, 2011 at 6:37 am

Im just seeing a site like this:
http://www.qualitylifeacademia.com.br/

Its not bad too..

Evan Skuthorpe
Nov 18, 2011 at 6:58 am

Some nice examples, thanks.

Alexander Girod
Nov 18, 2011 at 7:36 am

The is the actual promotion of the new CITROEN DS5 which very good website in all modern aspects: visually and technically (HTML5, CSS3, Responsive Design, Vertical Parralax). Take a look on the massive usage of CSS-Skew.

Rubens Cavalheiro
Nov 18, 2011 at 8:21 am

http://www.nissan.com.br/march/site/ ;0)

Evan
Nov 18, 2011 at 9:24 am

I worked on one recently too at http://makingconnectionseveryday.com/

We had fun making the many layers move and spent a good bit of time with the easing effect to have all the items ease into and out of place on the page.

Rasel Arnold
Nov 18, 2011 at 9:43 am

I wonder to red your post. I am waiting for your next pot. Thanks…;)

Jan
Nov 18, 2011 at 10:29 am

Great list. I’ve seen most of them but discovered a few new ones as well, love it.

I created a parallax & responsive site as well a couple weeks ago:

http://meacuppa.be

Krishna
Nov 18, 2011 at 10:46 am

These are awesome!!…so inspirational…

The Frosty
Nov 18, 2011 at 11:26 am

Now I’ve got something to play with this am.

Jason
Nov 18, 2011 at 11:48 am

This stuff is so impressive. Another great example…

http://livingword.co.uk

Can’t wait to start implementing this….

Khairil
Nov 18, 2011 at 11:57 am

I think this worth a mention: http://lostworldsfairs.com/

Evan Skuthorpe
Nov 18, 2011 at 12:08 pm

Not a fan. They’re nice but like the current craze of one page sites, they’re getting old…

Şişme bebek
Nov 18, 2011 at 1:54 pm

Can’t wait to start implementing this

Web Eminence
Nov 18, 2011 at 2:12 pm

One site pages are probably not that great for search engines either. They look cool though. Makes me want to play super mario and the Smokey Bones site makes be want a cheeseburger!

Mark Wong
Nov 18, 2011 at 2:25 pm

Cool examples but not totally convinced about this technique though.

Marvin
Nov 18, 2011 at 2:43 pm

Just incredible levels of expertise and creativity displayed on those links. Lots of interesting techniques used and food for thought. Genuinely have just had my ‘mind blown’!

Sean McCambridge
Nov 19, 2011 at 1:22 pm

Nice collection. Just built my first parallax scrolling site. Inspired most by Art of Flight, this was a project for Subaru. http://www.subaru-global.com/11la Would love to get your feedback.

I appreciate the concerns about a one-page site, especially for SEO. Though there is no reason you couldn’t have lower-level pages with or without the parallax. Googlebot sees the no-JS pre-enhanced version so there’s plenty of content to chew on. It’s also nice to see what happens when SEO isn’t the primary consideration.

zohaib
Nov 19, 2011 at 2:52 pm

my pick is Ben The Body Guard

Hai
Nov 20, 2011 at 3:40 pm

You’re missing the best one out there: http://www.beetle.com/

Sandeep Kumar
Nov 21, 2011 at 12:26 am

really nice collection, i appreciate your website to the best collection, it’s good to learn

web design mansfield
Nov 21, 2011 at 1:06 am

Great examples and will be implementing this technique.

Matt
Nov 21, 2011 at 4:13 am

Hey,

We have created 3 mini-sites with parallax effects : http://www.turbineperrelet.com

Was pretty fun to do :)

Maurice Svay
Nov 21, 2011 at 8:09 am

Here are some more, along with videos http://svay.com/blog/scrolling-websites-8-great-examples/

Wobble
Nov 21, 2011 at 9:08 am

Wow this is really inspiring …

Beben Koben
Nov 21, 2011 at 5:33 pm

waduh…parallax…so smooth ☺
ty ty ty ☻

Hikups
Nov 22, 2011 at 12:14 pm

What about mobile devices? I tested them all on an ipad, none of them seems to work, or give alternative static layouts. I really would like to see this work on an ipad. Maybe somebody can post some examples of that?

thanks!

M.H.
Nov 22, 2011 at 6:40 pm

Cool new effects out there :) I toyed around on a mini portfolio I whipped up for job interviews (see link at username, won’t spam it). Out of four companies where I applied, all four offered me the job. Great technique to impress people with rather easily. Would really recommend it!

As for the pre-loading: that’s nice, but at the very least give the visitor an idea of how much data you’ll be pushing through; in bandwidth-capped situations you might not be too happy with 10 MB’s worth of car pictures in all different colors. Giving them a way to cancel the process and watch a low-fi version of the site is probably a good idea.

That said, pretty things ARE there to be viewed!

Darrin Breen
Nov 23, 2011 at 1:11 am

These are REALLY great sites.

geoffrey
Nov 23, 2011 at 9:51 am

Hey
I just tried to experiment the Parallax scrolling effect as online portfolio. Its mostly based on Nike Better World.
http://geoffrey-menissier.fr/
I would like to have your feedback (I still have lot of problem with screens size, mobile version, IE.. but i’m trying my best to fix it)
Thanks for this , and inspirations.

Geoffrey

joe
Nov 23, 2011 at 1:26 pm

Good stuff, another is http://www.michaelannett.com

Manuel
Nov 24, 2011 at 3:27 am

very nice collection and tuts.
check also the fwa site of the day from 21.11.2011
http://www.360langstrasse.sf.tv/page/

kunalu
Nov 25, 2011 at 1:09 pm

Most interesting stuff I’ve seen this month. Nice work.

melanie
Nov 26, 2011 at 6:59 pm

inspiring. :)

Marcin Wrocław
Nov 27, 2011 at 6:05 am

Wow, those are one of the best websites i’ve seen! :)

Peter Schreiner
Nov 27, 2011 at 10:44 am

Aha, but only to reach this degree talent (said with much admiration).

ParePikseli
Nov 28, 2011 at 1:09 pm

I love Mario Kart site! Very complex and super sweet looking.

Ryan
Nov 30, 2011 at 8:12 am

cool. i hadn’t seen the Gidsy one before. I like it.

Another one I’ve come across is http://www.zeeblio.com

Tom
Nov 30, 2011 at 8:41 am

Some really well designed sites there. The Nike and Ben the Bodyguard ones are favourites. There are some I haven’t seen before as well. Good job.

Marco
Nov 30, 2011 at 12:27 pm

The SMARTUSA site is just amazing. Wow, I hope I can pull a job like this off soon :)

Great article guys!!

Web Design Watford
Dec 1, 2011 at 12:54 pm

That Nike Parallax Scrolling Ad was great! Just implemented a similar function into one of my clients websites.

Ann
Dec 2, 2011 at 7:59 am

Oh, thanks! I’ve never known how these cool web designs are named. Thanks for making us more versed in web design trends ;)

graphic design automaton
Dec 2, 2011 at 9:43 am

I have been meaning to implement this inot my website but haven’t found the time. soon enough i will, but until then check out this css tricks article on the same subject very interesting work. thanks.

css-tricks.com/2508-auto-moving-parallax-background/

Internetbureau Utrecht
Dec 5, 2011 at 7:22 am

This was really inspiring, thanks alot!!!!

Internetbureau Utrecht
Dec 5, 2011 at 7:27 am

This was really inspiring!! Im def. gonna use these for future projects.

David
Dec 7, 2011 at 2:55 am

Mario Kart –

A super effective site – not quite like playing the real thing, but hey, still cool ;-)

Thanks,
David

Tom Hermans
Dec 7, 2011 at 9:37 am

Another nice one is the Sony Tablet S campaign site:
http://discover.store.sony.com/tablet/#intro

Randy Bruiners
Dec 8, 2011 at 4:30 am

Surreal… the concepts in these designs are AMAZING!!

Zé Miguel
Dec 8, 2011 at 8:28 pm

The Mario Kart site was truly amazing. Huge attention on the details to (scroll wheel navigation, deep linking, video pausing). Really inspiring and a truly amazing work.

Does anyone know which agency did it?

Peter
Dec 11, 2011 at 7:51 pm

Make sure you check out http://www.carnationgroup.com/ :)

buy arena carry
Dec 12, 2011 at 2:22 pm

yes really inspiring, its helpful.

Terry
Dec 12, 2011 at 3:16 pm

Thanks for posting, these are very inspirational.

website design Mansfield
Dec 14, 2011 at 11:03 pm

I appreciate the concerns about a one-page site, especially for SEO. Though there is no reason you couldn’t have lower-level pages with or without the parallax.Lots of interesting techniques used and food for thought.

Drini
Dec 17, 2011 at 11:28 pm

One of the greatest things about this is that if you enter the Dutch site into google translate ( http://translate.google.com/translate?sl=auto&tl=en&js=n&prev=_t&hl=en&ie=UTF-8&layout=2&eotf=1&u=http%3A%2F%2Fwww.laurentiuswonen.com%2Fjaarverslag2010%2F&act=url ), almost everything gets translated into English!

Sticky
Dec 18, 2011 at 5:05 am

Deep thought! Thanks for contriubnitg.

Sanjay Dey
Dec 18, 2011 at 1:58 pm

Really cool collection!

спортни стоки
Dec 21, 2011 at 12:07 am

Great examples! Thanks!

Chad
Dec 21, 2011 at 12:46 pm

We just launched a new Parallax site for Iron Chef, Marc Forgione – http://www.chefmarcforgione.com

Steffen Daleng
Dec 23, 2011 at 6:35 pm

Great list.. thanks

free wp templates
Dec 23, 2011 at 11:53 pm

Love the post, i really like the “Laurentius” website…rocks!!

Will Sky
Dec 26, 2011 at 5:28 am

Just launched my first parallax scrolling site http://www.visconnect.de – screen adjusted and smart-phone safe ;)
what do you think?

Rebeen
Dec 27, 2011 at 3:49 am

Thanks for share! Nice collection! :)

référencement grenoble
Jan 1, 2012 at 1:57 pm

here is mine, hope you’ll like it :) http://www.regisgaillard.fr
3 differents layers in egg style ;)

tyler
Jan 5, 2012 at 12:08 pm

would be interesting to learn how to build these!

kataskeyh istoselidwn
Jan 7, 2012 at 6:50 am

Good to know there are web pages like these^^ :)

Chandu
Jan 9, 2012 at 5:59 am

very inspirational thanks for posting

sushil bharwani
Jan 10, 2012 at 8:00 am

Nice collection of Parallax site. Really inspiring

regis le guennec
Jan 12, 2012 at 10:34 am

Nice web site, …. our parallax srolling : http://2012.mba-multimedia.com/

Anaradam
Jan 14, 2012 at 3:10 am

Its a great post… Thanks for sharing with us…

huseyin
Jan 15, 2012 at 2:04 pm

http://dignor.com/givid snowboard site!

Website Design Malaysia
Jan 17, 2012 at 9:26 pm

Thanks for the great post! The New Zealand Website is awesome :D

Web Design La Porte
Jan 19, 2012 at 6:29 pm

Very interesting article! Alot of people spend their time just looking for the DoFollow links but in reality you can benefit from both NoFollow links as well.

Web Designer Philippines
Jan 26, 2012 at 10:02 am

That’s totally mind blowing website. Love the design and the effects of parallax.

Database Services mad
Jan 27, 2012 at 4:11 am

This work absolutely mind blowing website. I am in Love with these designs. The effects of parallax is awesome.

Stealth Web Designs
Jan 30, 2012 at 4:27 pm

These are fantastic examples of parallax scrolling. Very impressive.

Laser Centre
Jan 31, 2012 at 7:17 am

This is interesting example of parallax scrolling!!! Really impressive post.Many Thanks.

Mark Benson
Feb 13, 2012 at 4:09 am

Really impressive post. Thanks for that..

Georgi Georgiev
Feb 22, 2012 at 3:15 pm

Really nice post! Really interesting webdesign technology!
I would recomment one more site like these: http://www.webseitenfactory.de/

Paul Weston
Mar 5, 2012 at 3:55 am

I see a lot more sites using this feature when I am browsing the web and it is a feature I do like. I feel that it gives the site an extra feel to it and you feel as the viewer and user more involved with the site. This is a great collection you have put together and I really like the Beetle site. I love how as you scroll the years pass and the image slides and changes. I found myself scrolling for ages just to take the little bits of the site in. Great post and I look forward to more from you.

Jackie
Mar 5, 2012 at 4:41 pm

Not sure what happened to Moods of Norway, but it looks nothing like the screenshot you provided. Bummer too because I was looking forward to reviewing it.

Life insurance for Diabetics
Mar 12, 2012 at 9:00 am

Some amazing designs… love this!!

Thanks for sharing….

Joennie Sindo
Mar 13, 2012 at 6:12 pm

Great selection of Parallax scrolling sites. I launched my redesigned portfolio site with this in mind. Please check it out: http://digitaljoni.com

There are lots of cool animations and features to the site. Watch the flying airship fly by as you scroll up or down.

Arjun Rk
Apr 12, 2012 at 2:15 am

Thanks for sharing, it was a great info for me, Really thanks a lot….

magazin
Apr 30, 2012 at 12:55 pm

This does look like a great theme.a

Vpn Service Provider
May 4, 2012 at 2:27 pm

Art of life looks smart and inspiring. New Zealand site rocks!

Dzyngiri
May 13, 2012 at 11:38 pm

The beetle is also awesome ! ! ! !

Web desain
May 17, 2012 at 10:43 am

The main image size is the most impotant thing….

Tucson Web Design
May 18, 2012 at 1:56 pm

These websites are pretty amazing and the extra layering seems to really pay off in terms of creating a wow worthy website.

Malaysia Joomla
Jun 24, 2012 at 2:41 pm

This article has provided me the information that i was seeking.. Thanks for the blog.. It’s awesome.

igneta
Jul 20, 2012 at 4:25 am

woow. thanks

Baltic Condition
Aug 10, 2012 at 9:01 am

Parallax Technology

Tough Toys - 4wd Accessories
Oct 9, 2012 at 1:41 am

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

BlackPaper°
Oct 9, 2012 at 10:30 am

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

Web Design Inspiration Today
Oct 9, 2012 at 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)

Vindision
Nov 25, 2012 at 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.

Mixerowsky
Nov 26, 2012 at 3:14 pm

Another one: http://wakeman.whitecircleepub.com

Jess Samuel Smith
Nov 27, 2012 at 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

Carla Dawson
May 30, 2013 at 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

Window Cleaning Equipment
Jun 1, 2013 at 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

Brian
Jun 9, 2013 at 11:27 pm

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

Post Comment or Questions

Your email address will not be published. Required fields are marked *

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