July 22, 2024

21 Examples of Parallax Scrolling in Web Design

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


Campaign Monitor is Hiring


International Watch Co


Nike Better World


Old Pulteney Row to the Pole


Webdesign Karlsruhe


YEBO Creative




Len M




Drupalcon Denver 2012


Ben the Body Guard




Kisko Labs


Guy Vernes




Egopop Creative Studio


Jan Ploch


Web is Beautiful




manufacture d’essai



The Best Designs

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


  1. Tristar Web Design Reply

    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.

  2. Kick Interactive Reply

    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!

  3. Chris Ovenden Reply

    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.

    1. Lisa Reply

      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?

  4. Pragmatic Design Reply

    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!

    1. Tim Somers Reply

      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.

  5. Seth McLain Reply

    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.

  6. Graham Reply

    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.


  7. Jessica Reply

    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.

  8. Lex Koff Reply

    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!

  9. Sweb Reply

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

  10. david anthony Reply

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

  11. i2space Reply

    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

  12. connect Reply

    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.

Leave a Reply

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