Parallax Scrolling Effect – 12 Tutorials and Resources
I try not to succumb to the lure of new design tricks but alas I am human. While I have been able to avoid several recent design trends, I must confuse the “wow” of parallax scrolling grabbed me by the brain and hypnotized me for some time. I was so stricken that several previous design concepts for my agency website were focused around the parallax technique. At that time there was little information published on how to reproduce the parallax effect. I stumbled across one, maybe two different home-brewed techniques that worked but were not exactly what I wanted.
Eventually I gave up on the parallax idea and produced a website that stuck to typical javascript effects. In revisiting the technique for a new project I was pleasantly surprised with an abundance of tutorials and resources. In an effort to catalog them all, I developed the list below.
Tutorials
1. Recreating the Nike a Better World Parallax Effect
2. Javascript Parallax Effects (A Deeper Look)
3. One Page Website with the Parallax Scrolling Effect
4. Behind the Scenes of Nike Better World
5. Create a Funky Parallax Background Using jQuery
6. Create an Animated Parallax Header
7. Using jQuery to Create Parallax Scrolling Backgrounds
8. Parallax Scrolling Tutorial
Resources
9. Scrolling Parallax jQuery Plugin
10. jParallax Plugin
11. jQuery Scroll Parallax Plugin
12. Parallax Slider
13. jQuery Parallax Plugin
Thoughts on Parallax
There is no denying the “sexiness” of parallax effects but I question their usefulness. The primary purpose of the effect is an increase in engagement, ideally through an emotional response. If you have done any learning on emotion and design you know that all decisions are made based on emotion (with very little logic actually coming into play.) It would seem the parallax effect would be an ideal technique for any website… but it’s not. The approach is not without its shortcomings. The two major issues being performance related. Parallax websites tend to run slow even on fast machines and they also tend to slowdown the user. In the cases where users are just looking for information the “cool technique” becomes a hindrance, frustrating the user instead of exciting them.
Before using the parallax effect make sure it is the right approach for your situation.
Parallax Scrolling Effect – 12 Tutorials and Resources http://t.co/hjmFJ8VP via 3.7designs
Parallax Scrolling Effect – 12 Tutorials and Resources http://t.co/R7Hjt4qD
Parallax Scrolling Effect – 12 Tutorials and Resources from @3pointross http://t.co/yyKQ5xuy
“@bkmacdaddy: Parallax Scrolling Effect – 12 Tutorials and Resources – http://t.co/BUv50396“
Parallax Scrolling Effect – 12 Tutorials and Resources #webdesign http://t.co/apRDwd5b
12 tutoriales y recursos para crear efectos Parallax http://t.co/tdm0yxzf vía @Diigo
right, no metaphors here….
#Parallax Scrolling Effect – 12 Tutorials and Resources. http://t.co/znYBeeMv via @ThinkDevGrow #web #javascript
Hi,excellent tutorials.Neat and clear explanation.Keep going.
You’re spot on in noting the shortcomings of the parallax effect. I created Five3.me, a parallax theme for WordPress, so non-developers could create an impact with their brochure or portfolio site, but I’ve also seen folks try to use it for a standard blog (where content is king, not emotional impact). I’m also guilty of using it for documentation, which it really isn’t suited too as it’s slow to load and distracts from the content.
Cool theme Brent. I agree, it’s easy to get caught up in the glamor of new “technology tricks” only to end up with a site that is less engaging rather than more.
this article was great.