Line25

Showcase of Parallax Scrolling Effects in Web Design

Read the full post

The parallax illusion is one of the coolest effects to hit the world of web design. This showcase rounds up the best examples of websites that have a scrolling parallax effect. Some use the effect to add a subtle treat to the website’s background, whereas others use the parallax effect more prominently to create an exciting browsing experience.

Para-what?!

The parallax effect has been around for years in classic video games, but came into trend in the web design community when it was implemented into the background of the Silverback app website. The simple type of parallax effect seen on the Silverback site was used to spice the design with a hidden treat, only visible when the user’s browser is resized. The effect has since evolved and is now commonly seen as part of the scrolling feature of a web page, where multiple backgrounds seem to move at different speeds. Fast forward to recent months and the latest incarnation of parallax effects was pioneered by the Nike Better World website, where the whole site is based on one big parallax effect to create an interesting browsing experience.

Vertical parallax & scrolling parallax examples

This showcase of examples pulls together some of the latest and best vertical and/or scrolling parallax effects in web design, starting with the ever popular Nike Better World website. As you can see from the showcase many have been inspired by this example, and some even take it a step further. Be sure to check out each site individually and stroke that scrollwheel to see the full effect.

Nike Better World

View the website

Campaign Monitor is Hiring

View the website

Ben the Bodyguard

View the website

Old Pulteney Row to the Pole

View the website

DrupalCon Denver 2012

View the website

Tribute to Becks by Neil Berry

View the website

Netlash-bSeen

View the website

Manufacture d’Essai

View the website

The Chase – WeSC Footwear

View the website

ap-o

View the website

iutopi

View the website

IWC Schaffhausen

View the website

The Beatles Rock Band

View the website

CSS & jQuery parallax tutorials

Fancy giving it a go with a website of your own? This collection of resources will come in handy. Two of these tutorials cover the process of building the popular vertical or scrolling parallax effect, whereas the third from a few years back looks at the clever CSS behind that original Silverback example.

Recreating the Nike Better World Parallax Effect

View the website

jQuery and CSS Single Page Portfolio Vertical Parallax Experiment

View the website

How to recreate Silverback’s parallax effect

View the website

Free web shadows pack for every subscriber

Join the mailing list to have new content delivered straight to your email inbox. Every subscriber gets a free pack of realistic web shadows.

Written by Chris Spooner

Chris Spooner is a designer who loves experimenting with new web design techniques collating creative website designs. Check out Chris' design tutorials and articles at Blog.SpoonGraphics or follow his daily findings on Twitter.

  • http://www.espinteractivesolutions.com/ Interactive Solutions

    Thanks for sharing characteristic of parallax illusion for effective web designing.

  • http://www.alihm.ir AliHM

    iutopi very best in this collection :D thanks

  • http://www.catnipcreations.co.za Markus

    I find a lot of web browsing effects pointless and a waste of time but this one I love.

  • http://www.ianlunn.co.uk/ Ian Lunn

    Thanks for linking to my tutorial :)

  • Fredrik

    You forgot this one: unfold.no

    • http://www.beece.nl Tychop

      that one is really great, i love the effect that it starts again on top when your on the bottom of the page but keep scrolling.

  • http://www.gonzographic.com Gonzo the Great

    Hi Chris,

    .. nice collection featuring the parallax effect. Ben the Bodyguard and Nike are still the most impressive I think ..

    Maybe because I saw this effect first on these sites? What can I say, .. I'm an sentimental (old) fool ;-P

    Thanks for sharing this, Cheers & Ciao ..

  • Jimb0

    Great roundup, I love this style.

  • http://www.leegustin.com Lee Gustin

    Love these!! Thanks

  • http://www.wwe-wallpaper.net wwe wallpaper

    great …..

  • http://resolutionim.com Andrew Procter

    Great selection here – most of these are really well done. We did something similar at ResIM for one of our blog posts – http://res.im/speed

  • Lin Mac

    I have to be honest, most of these don't do much more than confuse me neurologically. Ben The Bodyguard is clearly the best use of this effect. I think it worked well with the Beckham & IWC sites, as well.

  • http://www.beece.nl Tychop

    I really like http://www.janploch.de

  • http://blog.manikrathee.com Manik

    Definitely a great effect – love seeing innovative uses of it.

  • Anthony

    AMAZING!

  • http://www.comnez.com Cedar Rapids Web Design

    Very nice post! Its true that one can learn something new everyday.

  • ABDUL JANOO

    you also make such kind of web site chris………. in tutorials

  • http://santi.fi/ @thesanti

    Thanks Chris!

    • http://santi.fi/ @thesanti

      Now a bigger tutorial for + members over at tutplus, thanks ;)

  • http://www.amazing-web-design.co.uk Joe

    This is a strange technique like said above it does confuse the eyes a bit, having said this some of the designers have made it work, the Beckham one looked quite good.

    Thanks Chris:)

  • http:///www.jgdesignz.com Jose Gonzalez

    HEY CHRIS,

    Great examples of parallax effect while those are very well executed it would be intresting to know how this one is done.

    http://www.alexandregomes.com.br/default.aspx

  • http://drawne.com Andy Feliciotti

    Campaign Monitor's hiring site is just plain WOW

  • http://personalprofilepage.com Carl Doppler

    Holiday lights decorating by Tony Snider

    November 24, 2010 By: tonysnider Category: Uncategorized

    We provide full service, start to finish. Exterior holiday decorating for commercial and residential properties. This includes having the option to lease or purchase our holiday lights and decorations plus; having our team of professional decorators perform installation, maintenance, and removal of the holiday lights and decorations.

    We can also provide storage for your purchased holiday lights and decorations in selected locations.

    Exterior holiday decorating for commercial properties. This includes having the option to lease or purchase our holiday lights and decorations plus; having our team of professional decorators perform installation, maintenance, and removal of the holiday lights and decorations.

  • http://www.designwoop.com DesignWoop

    Thats a great effect, I have never seen it before. Great collection of sites also.

  • http://www.iconshock.com juan iconshock

    Thanks for featuring our tut Chris :)

  • http://brianyerkes.com Brian Yerkes

    The effect can be nice sometimes, but it is terrible for SEO. So many designers don't take SEO into consideration and great web design is a match between all of the elements, not just design and interactivity.

  • http://www.espinteractivesolutions.com/ Interactive Solutions

    Parallax illusion is very helpful in the field of web designing but some old designer don't except this strategy.

  • http://www.webdesigncreare.co.uk/ Adam Booth

    Great incite into a great effect to either enhance web-design or create a stunning backbone for a site.
    The 'Nike Better World site uses the full potential of this effect. I love the way it has been used with quality photography to create a sleek interface.
    This is contrasted with sites like 'IWC Schaffhausen' and 'Old Pulteney Row to the Pole' which use it in a more subtle way to add a little more in interest to the site without it being overpowering.

  • http://www.impresscreative.com.au bellingen web design

    The web has really come along way over the past few years. The whole web 2.0 push has changed things forever… and dare i say jQuery!?

  • http://uxjobs.org Brandon Corbin

    There's no doubt that parallax is a killer experience. But it's only killer on modern browsers WITH modern computers. Until browsers become more efficient with all of these effects, and more people have powerful computers, I'd hold off. Don't forget that 25% of online shoppers are still using IE 6! :: shrugs::

  • http://www.dedy-design.com dedy moffedys

    i choose iutopi very inspirational..

  • http://www.sagi-design.co.il Sagi

    Great post Chris! Really! I really think you hit the trend that a lot of people didnt even know its name :)
    Cheers!

  • http://theicedesign.com/ Gustavs

    WOW that parallax scrolling effect is awesome! Thanks!

  • http://www.nickdownie.com Nick Downie

    Anybody else get a horrible jittery scrolling experience when looking at campaign monitor's hiring page in Chrome?

  • http://51websitedesign.com 51 Website Design

    Lol, you know I was going to delete all my email until I saw yours. It makes me want to read the rest now =].

  • http://frameworxdesign.co.za alice bicycle

    Has anyone noticed that when you get the fish on level one of the iutopi site lined up just right they form the outline of a shark? Now that is clever… ')

  • http://www.viewd.com.au/ Matt Green

    Great spotting of the shark @alice. Top post of some great sites Chris. @Nick D I also find the CM site jittery?