17 Inspiring Examples of Parallax Scrolling Sites

By / Oct 7, 2013 / Inspiration

When it comes to parallax scrolling, the line that separates good and bad choices is pretty thin. A while back parallax was being used to deliver an explosion of elements floating around the screen, and a lot of times the websites using the effect were a bit overwhelming. Fast forward a couple years, polish the idea and keep in mind that the “less is more” concept also works for parallax, and you have websites with elegant scrolling effects – like the ones we’ve rounded up for this post.

Baylie WordPress Theme

17 Inspiring Examples of Parallax Scrolling Sites

Broken Twill

17 Inspiring Examples of Parallax Scrolling Sites

theQ camera

17 Inspiring Examples of Parallax Scrolling Sites

Betty and Betty

17 Inspiring Examples of Parallax Scrolling Sites

Scytale

17 Inspiring Examples of Parallax Scrolling Sites

Srgint

17 Inspiring Examples of Parallax Scrolling Sites

Cyclemon

17 Inspiring Examples of Parallax Scrolling Sites

Sojourn Network

17 Inspiring Examples of Parallax Scrolling Sites

This is Now

17 Inspiring Examples of Parallax Scrolling Sites

l’unita

17 Inspiring Examples of Parallax Scrolling Sites

Fall in Tennessee

17 Inspiring Examples of Parallax Scrolling Sites

Made by Block

17 Inspiring Examples of Parallax Scrolling Sites

Kill your Darlings

17 Inspiring Examples of Parallax Scrolling Sites

WAAAC

17 Inspiring Examples of Parallax Scrolling Sites

Spotify

17 Inspiring Examples of Parallax Scrolling Sites

Serve Seattle

17 Inspiring Examples of Parallax Scrolling Sites

Codetex

17 Inspiring Examples of Parallax Scrolling Sites

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://pjbrunet.com PJ Brunet

    Whoever explained “parallax scrolling” to you is wrong.

    From Wikipedia: “Parallax scrolling is a special scrolling technique in computer graphics, wherein background images move by the camera slower than foreground images, creating an illusion of depth in a 2D”

    Different layers at different speeds = depth = parallax scrolling.

  • http://pjbrunet.com PJ Brunet

    Now I see srgint.com scrolling at different speeds but most of the links are either not working or just scrolling up and down. Owell.

  • Don Gepulango

    Personally I don’t like parallax scroll websites, it confuses me. Sure it looks great and has some awesome scrolling effects but its a little hard to navigate and loses its legibility.

  • http://enfuzed.com Zac

    They are all parallax, some of them like Scytale and Codetex are just really hard to see.

  • http://www.creativeinspira.com Faraz Ahmad

    They are totally new, unique and adorable 😛 Parallax is kind of mind diffusion thing, but it’s a new trend, Thank you for your effort, liked it.

  • http://www.techmest.com syed Aly

    Great and different kind of parallax scrolling.Gisele Muller if u ever checked Sweez. I love that site.

  • https://diiconsulting.com Dixon

    Wasn’t really aware of the whole parallax scrolling craze and didn’t see it at until I slowed my scroll down then it looked pretty cool. The Sweez site was very cool.

  • Vicky

    Very impressive. I have thought that you should avoid having your users scrolling down long pages. This was amazing and definitely food for thought.

  • http://trx-labs.org Andrzej

    Some of example websites aren’t scrolling smoothly even on my quad-core Mac!
    Oh, poor tablet users :)

  • http://www.ramworksmedia.com/ Robert Ramirez

    I definitely had to see this list since my site is a parallax site. I can agree with some of the comments made. Some sites are difficult to keep up with. Some parallax sites that I have come across have their content come in when you scroll to a certain point. To me that becomes difficult to keep up with. I like the more subtle parallax sites but this is a great list either way. My favorite has to be Baylie and Broken Twill. Awesome.

  • http://www.isadoradesign.com Alex

    Let’s face it when it comes to website design Parallax is in! The Fall in Tennessee website above is a great example. Adding the tiny menu on the far right hand side of the page is smart as some smaller laptops will not show the up and down arrows to scroll through the slides.

    Alex
    Isadora Design – A Professional Web Design Company

  • http://www.webdesignboom.com/ Akhtar

    Thank you so much! This parallax based hand-picked WP themes would be an useful for your readers too: http://www.webdesignboom.com/2014/parallax-wordpress-themes/