Earlier this year, I wrote a tutorial explaining how the Nike Better World website was created and how you could use jQuery to create that effect on your own website. Since the launch of Nike Better World, the web has gone parallax crazy with many websites trying their own hand at the effect.
When viewing the effect in Firefox, the performance issues are multiplied. I believe this to be a fundamental issue with how Firefox deals with page scrolling and can’t be avoided using a nifty work-around or hack (if you know better, let me know). With Firefox churning out new updates on a regular basis now, the effect has performed better than the last with each new iteration, but in my opinion, Firefox 6 — even on a high end machine — still struggles to calculate the effect without “stuttering”.
So, now we know the issues, how can we avoid them?
The obvious solution is to keep the number of media elements being manipulated to a minimum. However, this doesn’t mean you can only have x number of manipulated elements per page. You could potentially have 100s of elements on the page, providing there are only one or two (my recommendation) being manipulated in the viewport at any one time.
This “selective” manipulation can be achieved by using a script that determines when an element is or is not within the viewport (and being seen by the user).
My original demo uses Remy Sharp’s Inview plugin but that, unfortunately, is no longer supported and doesn’t work with the latest versions of jQuery. There are plenty more of these plugins available though.
Further to this, remember to always test on a mid-level machine to make sure your web page will work for the majority of users. As Firefox seems to “stutter” the most, I’d recommend you benchmark test using that.
Since posting my original tutorial, I got quite a few people asking me how could they get the effect working on mobile devices. Quite simply, you can’t! At least not for iOS devices (I haven’t tested on other devices so if my next point is true for other smart phones/tablets, please let me know).
$.Mobile = ($.Body.hasClass('webkit-mobile') || (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) || (navigator.userAgent.match(/iPad/i)))
//code for mobile device
//code not for mobile device
In my opinion, the parallax effect and attaching events to a users scrolling offer lots of ways to make a website experiential and unique. With the above tips, hopefully your implementation of the effect can be more efficient and a great experience for your users, just like Nike Better World is.