Mind Blowing Parallax Scrolling Sites

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.

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.

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

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.

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.

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

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.

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!

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/

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/

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 …

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!!!!

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!