Parallax Tools and Techniques

By / Dec 5, 2012 / Tools

The parallax effect has been around for a while and since we noticed that our readers really like the technique, we decided to gather a few tools and tutorials to help you implement parallax scrolling in your own projects. This effect creates an illusion of depth and movement in the screen, and if well applied, can result in an engaging experience for the user. Like any other effect, the key is moderation. Using parallax to give your website some depth and added interest is great, but try to avoid too much of it or you may end up with a site that has too much going on.

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.

Scrollorama

8 Parallax Tools

curtain.js

8 Parallax Tools

jQuery-Parallax

8 Parallax Tools

stellar.js

8 Parallax Tools

jparallax

8 Parallax Tools

Skrollr

8 Parallax Tools

Parallax.js

8 Parallax Tools

A Simple Parallax Scrolling Technique via Nettuts+

8 Parallax Tools

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.bodhum.net/ Bodhum

    These are excellent techniques for dynamic website layouts. Studios and design agencies often couple parallax scrolling with big responsive background images. It’s a great design concept and runs perfectly in modern browsers with CSS3 support.

  • http://www.pragmaticdesign.co.uk Web Design Wolverhampton & Birmingham

    Oh, fab, thank you :)

  • http://www.designturnpike.com Design Turnpike

    I have to do this in 2013! My handmade artwork photography would be perfect in this effect.

  • http://www.mohi.me Mohiuddin Parekh

    Thanks Gisele for Compiling such a nice list, including my tutorial (Simple Parallax Scrolling Technique) on NetTuts+

  • http://www.driftwebdesign.com Drift Web Design

    Excellent list of resources Gisele, we’ve really grown fond of parallax elements (when used correctly, of course). We definitely agree that people have gone a bit overboard with parallax as of late, but when used correctly it can really set off a design!

    P.S. Those are some sweet tutorials Mohiuddin Parekh, thanks for the links.

  • http://www.allsortsdesign.co.uk Francis Donlevy

    these are really good but i’m trying to find a paralax program that resizes the background to the browser window. am i asking a bit much?

  • http://superbwebsitebuilders.com/ Howard Steele

    Excellent compilation, thanks!