21 Examples of Parallax Scrolling in Web Design

Posted by Gisele Muller on May 23, 2011 | 51 Comments

Parallax is a difference in the in the apparent position of an object viewed along different lines of sight. The term derives from the Greek word parallaxis, meaning alteration. In web design, the parallax effect is a relatively new trend. The effect itself has been around for a while, but lately is becoming more used and talked about.

The Parallax effect or parallax scrolling in web design is the technique that features layered images that move around the website in different speeds/perspectives creating a nice and interesting 3D illusion. We gathered some examples of websites using the parallax effect to inspire you. This effect certainly makes scrolling around websites an interesting experience.

Source:

The Best Designs
Awwwards

About the Author

I love communication, technology, web, design, movies, gastronomy and creativity. Web writer, portuguese/english translator and co founder of @refilmagem & @mentaway Twitter: @gismullr

Here's some other articles that you will definitely find useful.

51 comments

SitePunk
May 23, 2011
Wow, nice collection! Thanks for sharing! Keep up the good work!
Reply
Federica Sibella
May 23, 2011
I love Head2Heart, really beautifully done. Thanks for the inspiring collection.
Reply
Tristar Web Design
May 23, 2011
A really fantastic list showing a really intelligent and impressive style of web design. I would love to learn more about how to do this, if anyone knows of any discussions or possible tutorials I could have a go at I would be really grateful. I’m a big fan of Cultural Solutions and YEBO Creative and I love the way unfold appears to be sliding diagonally.
Reply
- fractalfrog
  May 23, 2011
  Some tutorials:
  
  http://www.ianlunn.co.uk/blog/code-tutorials/recreate-nikebetterworld-parallax/
  http://www.tutorialshock.com/tutorials/single-page-portfolio-vertical-parallax-jquery-css/
  http://thinkvitamin.com/design/how-to-recreate-silverbacks-parallax-effect/
  Reply
Kick Interactive
May 23, 2011
I love these, I didn’t even know what Parallax meant until this post.

I agree with Head2Heart, that’s a really nice one. Iutopi is my fav I love the grainy vector artwork and the scrolling effect works so well with the diving theme. The site design makes you want to scroll through all of the content and reach the bottom!
Reply
Chris Ovenden
May 23, 2011
I haven’t worked may way through the whole list yet, but the awful user experience of the first few – viewed in Chrome and Firefox 4 on Linux – offer a compelling argument against ever doing this.
Reply
Pragmatic Design
May 23, 2011
These are wonderful!

I remember first seeing parallax scrolling in “Shadow of the Beast” on the Amiga. I didn’t think I’d still be getting excited about it 20 years later!
Reply
- Tim Somers
  May 23, 2011
  I LOVED “Shadow of the Beast!”
  
  now, back on topic…
  
  Webdesign Karlsruhe intrigued me a great deal. Basing the scrolling on mouse movement was a little disconcerting at first, but proved rather effective once you get the hang of it.
  Reply
Simen
May 23, 2011
Check this site out aswell: http://www.moodsofnorway.com
Reply
Greg
May 23, 2011
Hmm… pretty similar to this post a few weeks ago.
Reply
Christophe Lauer
May 23, 2011
Very nice collection of websites. If you’re interested in such sites using paralax to render compelling effects, I’m sure you will want to check this full HTML5 Comics created by the French studio “Steaw Webdesign” :

http://www.nevermindthebullets.com/

You can also create your own comics, and share with friends

Enjoy !
/CL
Reply
Seth McLain
May 23, 2011
Totally agree with Chris Ovenden. I couldn’t get through the first few. Distracting and glitchy. The idea itself, if done in a subtle way where it doesn’t detract from the content, isn’t bad, but the reality is just awful. I would never use this in a design.
Reply
Johan
May 23, 2011
Really cool! I didn´t know what it meant until I found this post.
Reply
Osvaldas
May 23, 2011
Not mentioned, but example as well: http://www.sheepy.me (with depth illusion)
Reply
Inspiraaz
May 23, 2011
Realy good one, not mentioned here is BeerCamp … if you keep scrolling on the beer camp site you get the inception spinning top.
Reply
Angelee
May 23, 2011
The very first one looks amazing.. really a unique design! Parallax is indeed the hippy trend now.
Reply
Graham
May 24, 2011
I’ve been browsing different sites for modern design ideas, i was wondering why i haven’t got to your site at the first place. Your collections are cool. I’m trying to browse most of your design to learn more.

You’re site is now bookmarked! thank you for sharing your ideas.

Graham
info@jdesign.net.au
Reply
Pushpinder Bagga
May 24, 2011
Super!
Reply
Jessica
May 24, 2011
To be honest, except for maybe head2heart, they were all horrible in user experience.

Not sure these were the best in the bunch to pick from to show what parallax is all about. It would be better to see them in less evasive examples.
Reply
Flemming Rasmussen
May 24, 2011
This new Lars Von Trier site for Melancholia does a nice job of parallax scrolling too.
http://www.melancholiathemovie.com/
Reply
Mauro Macchiaroli
May 24, 2011
Thanks Giselle for this article. But please fix the name of our website. Its Iutopi. not Iutopia. Thanks again
Reply
- Gisele Muller
  May 24, 2011
  Sorry for that! Just updated.
  Reply
Jonathan Weisberg
May 24, 2011
These are all great examples and really cool websites! Great inspiration.
Reply
Lex Koff
May 24, 2011
Really cool special effect! I did run into the sites like that a few times in the past, but had no idea how it’s called. Thanks for an inspiring round up and the tutorials in the comment section. Really appreciate it!
Reply
Sweb
May 24, 2011
Many beautiful examples that help the designer to quickly come up with ideas for your new design. Sure, thanks for this nice article
Reply
Ronnie Saini Web Design
May 24, 2011
wow!

I didn’t even know what Parallax meant until before this post, very different and very creative concepts. I loved the designs and layouts.
Reply
Steve Downey
May 25, 2011
So, what’s the final verdict? The UX’ers vs. the designers
Reply
Ehab
May 25, 2011
Thank you for the crazy creativity, yes we have to be crazy to make creative work like this, i looooooove it
Reply
Ant
May 25, 2011
This site also has parallax scrolling http://www.jtypevan.com/ The vans change every time you go to a different page. I love the way they bounce along!
Reply
david anthony
May 25, 2011
This is a step backwards. They may look pretty but it just doesn’t work.It’s that never ending search for gimmicks that destroys the UI integrity. Go easy with this….
Reply
i2space
May 26, 2011
Great collection of web sites, Before this post i dnt even heard of “parallax” word. But now its amazing to see parallax on website too. This is an amazing creation. I had spent lot of time to go through all those sites, Thans for clubbing together all parallax sites
Reply
mike
May 27, 2011
I used this on my website header: http://beantowndesign.com Try dragging the screen to different widths, see the building and clouds move differently.
Reply
lawoman
May 27, 2011
Very nice from a visual standpoint. From a usability standpoint, some are more effective than others.
Reply
Jonas
June 3, 2011
Also check http://www.demodern.de/
Reply
- Nagavardhan Raju
  August 19, 2011
  Do you any idea how to duplicate this website scrolling feature? thanks.
  Reply
connect
June 4, 2011
Hello Friend ,

Nice Comments

I am here to know about the web designing, such as how to add two different images but make sure partition should invisible.
Reply
Ajay
June 6, 2011
All of them are nice, creative and innovative but mess up with eyes and mind when u try to scroll.
Reply
Incircle media
June 17, 2011
It’s really wow collection.

I like it.

Thanks to share.
Reply
John Bristowe
July 3, 2011
Check out NewZealand.com. A nice example!
Reply
Derek
July 18, 2011
The Dentsu Network site is another really nice example
http://www.dentsunetwork.com/
Reply
Denes
November 3, 2011
Wow,
good collection, great inspiration.
Check this dynamic 3D cloudy sky parallax webpage: http://bit.ly/vWDYlK
Reply
Malena
November 25, 2011
This is an awesome list! Many thanks! This is also another site that does a really good job with the parallax effect. http://www.gibsonsfinest.ca/
Reply
Jon
November 30, 2011
This is the best source on the web for inspiring digital design. Thank you so very much.
Reply
Will Sky
December 26, 2011
Just launched my first parallax scrolling site http://www.visconnect.de – screen adjusted and smart-phone safe
with mooTools and Contao CMS
Reply
RLG
January 4, 2012
Nice, another good web design scrolling parallax for happy new year digital card : http://bit.ly/AaIDit,
Reply
κατασκευη ιστοσελιδων
January 17, 2012
Very nice parallax design!
Reply
Georgi Georgiev
February 22, 2012
Really nice post! Really interesting webdesign technology!
I would recomment one more site like these: http://www.webseitenfactory.de/
Reply
Joennie Sindo
March 13, 2012
Great selection of Parallax scrolling effect. 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 down.
Reply
jack
April 9, 2012
nice work ya
Reply
Santosh
April 25, 2012
This is also parallax = http://www.thisisnowexhibition.com/
Reply
Web Komsija
August 13, 2012
looks very descrete not to much fancy, and it can be used and for some blogs and for bussines websites… Thx!
Reply

Web Design Ledger

Source:

About the Author

Related Posts

51 comments

fractalfrog

Chris Ovenden

Simen

Greg

Seth McLain

Steve Downey

Ant

Jonas

Derek

Denes

Malena

Jon

Georgi Georgiev

Santosh

Leave a Reply

Subscribe