18 Beautiful Examples of Parallax Scrolling in Web Design

By / Apr 2, 2012 / Inspiration
shares

The parallax effect in web design is something that has gained popularity over the past couple of years. When used properly, it can result in a rich and engaging user experience with seamless navigation. When used poorly, it can result in just a page with a lot of elements moving around and a terrible UX. If you’re considering using a parallax effect in your next web design project, we’ve gathered some great examples here to inspire you.

Hero

A portfolio WordPress theme that uses a parallax effect in the home page banner to highlight the site’s key message in an engaging fashion.

Bagigia

Scroll down to explore the website and enjoy a 360 view of the products.

Parallax Scrolling in Web Design

Whiteboard

Here the concept is the same, fixed images with texts and content moving, creating a nice and smooth effect.

Parallax Scrolling in Web Design

Playtend

Playtend choose a fun concept and executed it pretty well. Scroll down and the monster will “eat the content.”

Parallax Scrolling in Web Design

New Zealand

Scroll down to explore things to do in New Zealand while you see more beautiful background images.

Parallax Scrolling in Web Design

TokioLab

TokioLab uses a lot of typography to help you navigate their website. Scroll down to explore their mission and portfolio while you enjoy a lot of moving text.

Parallax Scrolling in Web Design

Cheese Please

Cheese Please is a game so of course we can expect a lot of colors and fun elements on their website. Even with all the colors and elements moving they accomplished a nice and fun effect.

Parallax Scrolling in Web Design

Marcus Thomas

Scroll down to explore the website and see texts and images nicely floating around.

Parallax Scrolling in Web Design

Krystalrae

Once again we see an example of fixed background images (textures in this case) with content moving and creating a nice effect. Scroll all the way to the bottom of the page to change the model’s outfit.

Parallax Scrolling in Web Design

Air Jordan 2012

Scroll down to choose your flight mode while you enjoy planes, shoes and texts floating around.

Parallax Scrolling in Web Design

Q music Titanic

Scroll all the way down to check some Titanic facts and to find the ship in the bottom of the ocean.

Parallax Scrolling in Web Design

no leath

Scroll down to see the different shoes they offer while a lot of colorful images float around.

Parallax Scrolling in Web Design

Putzengel

Beautiful colors, type and textures will move around while you navigate their products and services.

Parallax Scrolling in Web Design

Fishy

A fun and creative approach to parallax applied to a creative agency website.

Parallax Scrolling in Web Design

Tokyu Agency Recruit 2013

Press start and they will take you down the road so you can start scrolling to check out if you have what they need to apply for the job.

Parallax Scrolling in Web Design

Soleil Noir

Scroll down to explore a colorful and smooth navigation. The color scheme, textures and type are really nice here.

Parallax Scrolling in Web Design

OK Studios

Another good example of fixed images and moving content.

Parallax Scrolling in Web Design

CSS Design Awards
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

38 Comments

  1. Lucho Lalev
    April 2, 2012

    Good selection. Already got an idea what to implement in a project of mine!
    Cheers!

    Reply
  2. Adrian
    April 2, 2012

    Parallax has a few uses and it’s coming back, great list.

    Reply
  3. Rodleg
    April 2, 2012

    very nice selection , thank you !

    Reply
  4. Bart Verbeeren
    April 2, 2012

    Some really great examples. Thanks for sharing. We launched something similar last week: http://www.essentielevetten.be

    Reply
  5. Web Design Fact
    April 2, 2012

    Nice examples. Thanks for sharing !

    Reply
  6. Rich Hamilton
    April 2, 2012

    Thank you for posting this. It gave me some ideas for a project I’m working on right now.

    Reply
  7. Ronny
    April 2, 2012

    I didn´t know, how is this effect called, thank you very much for this.

    Reply
  8. Sian Saunders
    April 2, 2012

    Great new set of parallax scrolling websites! Have a look at http://www.realaletrailflintshire.co.uk

    Reply
  9. Karey
    April 2, 2012

    Thanks for this! My new portfolio site is parallax as well.

    Reply
  10. Christina Cruz
    April 2, 2012

    Great selection. I got some ideas for websites.

    Reply
  11. Xander
    April 2, 2012

    Just a shame that so many of those designs—while looking awesome and being technically impressive—fall down on the basics of modern web implementation, especially: accessibility, mobile-friendliness, and performance. Just try viewing them on a mobile browser, or disabling JS or CSS, or (God forbid) try using a screen reader.

    Granted, there are some really beautiful works you’ve listed here, and thanks for the great inspirations, but it’s the technical aspects that would lead me to seriously question the “form vs function” aspect of some of them… I just hope they really knew their (browser) audience.

    Reply
  12. Juerg Wyss
    April 3, 2012

    Nice selection, indeed. Parallax scrolling looks nice and can create some emotions if well done. However, it is good for SEO, SEM? Is it good to create landing pages? Does it fit the needs of a visitor? Do I find the information I want?

    I took the example of “Putzengel”:

    >5 sec load time – bad, Google will give you little points for this
    Result for “Putzfirma Wien” (that’s how you probably would search a company like them: NOT on the first 10 pages at Google
    It took my too long time to find out in which city they’re working, I’m not patient enough and would probably leave the site
    Beside two weaknesses of design/funtionality:
    Google maps no possibility to show directions to their office
    Link to designer opens in same window (is this best practice? You’re loosing your potential client)

    There are many more things. So, I’m not convinced parallax scrolling is something I would like to have on my website, sorry.

    Reply
  13. @eddievick
    April 3, 2012

    Really interesting stuff, a great collection.

    Reply
  14. Aaron @ iamcreative.me
    April 3, 2012

    Air Jordan is amazing!

    Gisele, thanks for sharing again.

    Reply
  15. Elliot Geno
    April 3, 2012

    I’m sorry, but parallax scrolling site are the new Flash intro. Regardless of how well they are designed. (There were some pretty well designed Flash intros back in the day.) It just seems that if this is to be a replacement for experience design, it should actually involve an experience deeper than flicking your scroll wheel.

    Reply
    • Tee
      April 3, 2012

      Yep, have to agree. A few of these sites nailed the look and the functionality, but most sacrificed the latter, and I was quickly left either hunting for relevant information or bored. Often both, as the novelty wore off. I think these are the types of designs that make lists like these, but make it difficult on potential customers. Web designers seem to be the target audience for these sites, and I’m fairly sure that’s not intentional.

      Reply
  16. Design Turnpike
    April 3, 2012

    Wow, so well done! I’m jealous. :)

    Reply
  17. Michael Williams
    April 3, 2012

    Thanks for posting this. OK-Studio very exciting. Shows how progressive they can be. Look forward to reading more of your posts.

    Reply
  18. Nigel Poole
    April 3, 2012

    Some nice example here, but not all have the parallax effect. The parallax effect is where the objects move at different speeds to create the illusion of depth, Ie objects in the foreground move quickly, whilst objects at a distance move slower. The paper cranes in the http://www.ok-studios.de/home/ example show this well.

    Is there a better term we can use for websites with scrolling navigation? I’d like to see the term parallax used only when it relates to the meaning of the word.

    Reply
  19. Jon Shenton
    April 5, 2012

    Really nice technique and a great collection of examples. Such an exciting time for the web.

    Reply
  20. Shri
    April 6, 2012

    Thank you Gisele!
    That’s an awesome collection of emerging trends. Can’t wait to go back to my bookmark.
    Cheers.

    Reply
  21. Kate
    April 6, 2012

    I didn’t go through all of them, but I really loved the typography focused one (from Tokio Labs) and the cute Playtend one. I really liked the concept of the New Zealand one, but at least on my screen it looked really choppy. The Ok Studios one is cool too. All of these have elevated their websites from merely functional to being an art form, which I feel like usually graphic designers and web designers get criticized of lacking. Beautiful!

    Reply
  22. Anne
    April 6, 2012

    This article is disappointing. Although these may seem like it is minimalist and simple they are anything but. “Scaled back to the bare necessities” doesn’t mean less time, it means the designers need to focus more on the small details and grid. Also, all these examples are the same as being minimalist, not exactly a “merging trend” as most good designers have already done this previously.

    Reply
  23. Scott
    April 8, 2012

    Some of the examples are so impressive! Even though they’re not great for SEO or mobile browsing… and some of the designs didn’t really work on a laptop sized screen.. but that’s being picky.

    Reply
  24. Evan Skuthorpe
    April 10, 2012

    Some great examples here, cheers.

    Reply
  25. Igor Ivanković
    April 10, 2012

    You forgot our website :) http://www.taptapdesign.com We have an awesome parallax effect on the main slider :)

    Reply
  26. Paul Weston
    April 13, 2012

    This is one one the most inspirational articles I have seen for a long while. Parallax scrolling seems to be the in thing at the moment and something that I personally love. I think it adds a great effect to a website and can bring it to life and enhance a users experience. I love all the examples you have put together and they all have aspects that give them that wow factor. The sites that really stood out for me were the Air Jordan 2012 and Krystalrae sites. I love the smoothness of both sites, in the case of Air Jordan the attention to detail with how the inner boot goes inside the shoe and with Krystalrae how the model changes outfit as you scroll down. Greta article and I look forward to seeing more like this from yourself.

    Reply
  27. Krystalrae
    April 15, 2012

    Honored we made your list. Thank you!

    Reply
  28. Geoffrey
    April 16, 2012

    Nice exemples,

    I like the idea of Playtend, very fun and simple, but i’m not sure that its really parallax scrolling… just a normal scrolling with a fixed image on top. No ?

    I did my portfolio in parallax scrolling too, but almost one year ago, so it’s not that good, its based on the nikebetterworld website : http://geoffrey-menissier.fr

    Thanks for the inspiration !

    Reply
  29. Darren @ 123 Web Design
    April 18, 2012

    The Hero demo doesn’t seem to do a lot for me on this version of FF –

    Kind of like the Bagigia site, but it still kind of seems we’re pushing the boudaries of browsers beyond what they are comfortable with…

    Many Thanks,
    Darren.

    Reply
  30. iano
    May 9, 2012

    I really like TokioLab fun and interavtive site that is different

    Reply
  31. Donnie
    June 10, 2012

    hey, check this one, seems they’re using parallax too..

    http://www.visiartmedia.com

    Reply
  32. Rishi
    July 17, 2012

    Really very nice collection…. Great job.

    Reply
  33. Chris Black
    August 1, 2012

    Hero portfolio WordPress theme, Playtend or Friendly Gents websites doesn’t count as parallax effect.
    As we read on the Wikipedia: “Parallax is a displacement or difference in the apparent position of an object viewed along two different lines of sight, and is measured by the angle or semi-angle of inclination between those two lines”.
    A website using parallax effect has a background that moves slightly slower than the user scrolls. You do that by changing the top position of the background for every pixel the page is scrolled. You’ll need more than HTML and CSS to archive a real parallax effect. Something like JQuery to make calculations.
    Multiple backgrounds can be applied to a entire page or just a section (using DIVs, etc.) and are moved in a similar way: every time the user scrolls down or up the page by a pixel, the positions of the backgrounds are changed (usually at different speeds to make the effect).
    If JavaScript is Disabled in the browser, the user hit a problem. All that jQuery does is moves the backgrounds relative to the position of the scrollbar. Without it, the backgrounds just stay put and the user would never know they are missing out the real action… Even when CSS2 does a good enough job to still make the effect look cool, is not really parralax effect. That’s just a simple background with a fixed attribute (like you can see in Hero WordPress theme’s header).
    A good example of real parallax in this list is the OK Studios website…
    The bad part about parallax effect on sites is that designers become exited about using really big images and PNG transparency to create a good looking website (not to mention lots of additional scripts and HTML5 + CSS3 to add sliders, etc.)… but that pays on loading time…
    Actually, I’m making my personal blog using mostly text over different layers to get the stuff working… and loading times works good enough.. like a “normal” website :)

    Reply
    • Web Design Inspiration Today
      September 5, 2012

      Agree with Chris Black, some of these examples don’t really use parallax effect. Also with the big resources loaded. Many parallax sites need a longer loading time. But I think if the interface is awesome, it is still worth waiting then.

      By the way, this is still a great list of web design inspiration! Thanks for posting

      Reply
  34. Paul Grieselhuber
    April 3, 2013

    This is a site for a wedding between a web designer / rocker and his special gal. Some Brits in the house I’m AirBnBing are friends with the dude and showed it to me the other day. Pretty sure it beats all of the above hands-down: http://jessandruss.us/

    Reply
  35. AnandRK
    April 8, 2013

    Really very nice collection…. Great job.

    Reply
  36. Howard Steele
    June 27, 2013

    ‘Cheese Please’ looks really nice.
    I think it’s important to use the freshest trends (wisely, of course) in order to attract more visitors.

    Reply

Leave a Reply