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
curtain.js
jQuery-Parallax
stellar.js
jparallax
Skrollr
Parallax.js
A Simple Parallax Scrolling Technique via Nettuts+
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.
Oh, fab, thank you 🙂
I have to do this in 2013! My handmade artwork photography would be perfect in this effect.
Thanks Gisele for Compiling such a nice list, including my tutorial (Simple Parallax Scrolling Technique) on NetTuts+
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.
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?
Excellent compilation, thanks!