Parallax Tools and Techniques

By / Dec 5, 2012 / Tools
shares

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

7 Comments

  1. Bodhum
    December 6, 2012

    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.

    Reply
  2. Web Design Wolverhampton & Birmingham
    December 6, 2012

    Oh, fab, thank you :)

    Reply
  3. Design Turnpike
    December 10, 2012

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

    Reply
  4. Mohiuddin Parekh
    December 11, 2012

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

    Reply
  5. Drift Web Design
    December 12, 2012

    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.

    Reply
  6. Francis Donlevy
    March 26, 2013

    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?

    Reply
  7. Howard Steele
    July 23, 2013

    Excellent compilation, thanks!

    Reply

Leave a Reply