21 Examples of Parallax Scrolling in Web Design

By / May 23, 2011 / Inspiration

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.

cultural solutions uk

parallax02

Campaign Monitor is Hiring

parallax01

International Watch Co

parallax03

Nike Better World

parallax04

Old Pulteney Row to the Pole

parallax05

Webdesign Karlsruhe

parallax06

YEBO Creative

parallax07

Head2Heart

parallax08

Len M

parallax09

iutopi

parallax10

Drupalcon Denver 2012

parallax11

Ben the Body Guard

parallax12

Fingerbilliards

parallax13

Kisko Labs

parallax14

Guy Vernes

parallax15

Netlash-bSeen

parallax16

Egopop Creative Studio

parallax17

Jan Ploch

parallax18

Web is Beautiful

parallax19

unfold

parallax20

manufacture d’essai

parallax21

Source:

The Best Designs
Awwwards

About the Author

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

  • http://www.sitepunk.com/ SitePunk

    Wow, nice collection! Thanks for sharing! Keep up the good work! :)

  • http://www.musings.it Federica Sibella

    I love Head2Heart, really beautifully done. Thanks for the inspiring collection.

  • http://www.tristarwebdesign.co.uk/ Tristar Web Design

    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.

  • http://www.kickinteractive.net/ Kick Interactive

    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!

  • Chris Ovenden

    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.

    • Lisa

      I love the Parallax scrolling when I am on my desktop with two 25″ monitors, But on an ipad, almonst none of these designs worked. I wonder who these designerrs are aiming at?

  • http://www.pragmaticdesign.co.uk Pragmatic Design

    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!

    • http://www.bestwerx.com Tim Somers

      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.

  • Simen

    Check this site out aswell: http://www.moodsofnorway.com

  • Greg

    Hmm… pretty similar to this post a few weeks ago.

  • http://www.clauer.fr Christophe Lauer

    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

  • Seth McLain

    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.

  • http://www.johanfahlgren.se Johan

    Really cool! I didn´t know what it meant until I found this post.

  • http://www.osvaldas.info Osvaldas

    Not mentioned, but example as well: http://www.sheepy.me (with depth illusion)

  • http://www.inspiraaz.com Inspiraaz

    Realy good one, not mentioned here is BeerCamp … if you keep scrolling on the beer camp site you get the inception spinning top.

  • http://featurethem.com Angelee

    The very first one looks amazing.. really a unique design! Parallax is indeed the hippy trend now.

  • http://www.jdesign.net.au Graham
  • http://www.pushpinderbagga.com/ Pushpinder Bagga

    Super!

  • http://www.simplyjessi.com Jessica

    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.

  • http://www.wearebigger.com Flemming Rasmussen

    This new Lars Von Trier site for Melancholia does a nice job of parallax scrolling too.
    http://www.melancholiathemovie.com/

  • http://www.iutopi.com Mauro Macchiaroli

    Thanks Giselle for this article. But please fix the name of our website. Its Iutopi. not Iutopia. Thanks again

    • http://gismullr.com Gisele Muller

      Sorry for that! Just updated.

  • http://www.weisbergweb.com Jonathan Weisberg

    These are all great examples and really cool websites! Great inspiration.

  • http://www.templamatic.com Lex Koff

    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!

  • http://www.swebdizajn.com Sweb

    Many beautiful examples that help the designer to quickly come up with ideas for your new design. Sure, thanks for this nice article

  • http://www.webdesigncompanyboston.com Ronnie Saini Web Design

    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.

  • Steve Downey

    So, what’s the final verdict? The UX’ers vs. the designers

  • http://www.underconstruction.com Ehab

    Thank you for the crazy creativity, yes we have to be crazy to make creative work like this, i looooooove it

  • Ant

    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!

  • http://www.designintuition.co.uk david anthony

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

  • http://www.i2space.com i2space

    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

  • http://www.ammokits.com mike

    I used this on my website header: http://beantowndesign.com Try dragging the screen to different widths, see the building and clouds move differently.

  • http://www.armgardtdesign.com lawoman

    Very nice from a visual standpoint. From a usability standpoint, some are more effective than others.

  • Jonas
    • http://magazine.nuefolio.com/ Nagavardhan Raju

      Do you any idea how to duplicate this website scrolling feature? thanks.

  • http://www.australiawebsitesdesigner.com/ connect

    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.

  • http://www.ajaykumarsingh.com Ajay

    All of them are nice, creative and innovative but mess up with eyes and mind when u try to scroll.

  • http://www.incirclemedia.com Incircle media

    It’s really wow collection.

    I like it.

    Thanks to share.

  • http://bristowe.com/ John Bristowe

    Check out NewZealand.com. A nice example!

  • Derek

    The Dentsu Network site is another really nice example
    http://www.dentsunetwork.com/

  • Denes

    Wow,
    good collection, great inspiration.
    Check this dynamic 3D cloudy sky parallax webpage: http://bit.ly/vWDYlK

  • Malena

    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/

  • Jon

    This is the best source on the web for inspiring digital design. Thank you so very much.

  • http://www.willsky.de Will Sky

    Just launched my first parallax scrolling site http://www.visconnect.de – screen adjusted and smart-phone safe 😉
    with mooTools and Contao CMS

  • http://www.mba-multimedia.com RLG

    Nice, another good web design scrolling parallax for happy new year digital card : http://bit.ly/AaIDit,

  • http://www.webmac.gr κατασκευη ιστοσελιδων

    Very nice parallax design!

  • Georgi Georgiev

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

  • http://digitaljoni.com Joennie Sindo

    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.

  • http://jack.com jack

    nice work ya

  • Santosh

    This is also parallax :) = http://www.thisisnowexhibition.com/

  • http://webkomsija.net Web Komsija

    looks very descrete not to much fancy, and it can be used and for some blogs and for bussines websites… Thx!

  • http://superbwebsitebuilders.com/ Howard Steele

    Great trend and great websites!

  • http://peregrinemag.com Joe

    There’s a beautiful implementation of parallax background photography on travel magazine Peregrine’s website: http://peregrinemag.com/desert-calling-negotiating-the-edge-of-existence-in-the-namib/

  • http://lilipad.ir Pouya

    Very nice :)