Over the past 2 weeks I’ve done a lot of research into Apple’s CoverFlow effect and how other developer’s have implemented it in languages and frameworks such as AS3, ProtoType MooTools. Without a doubt, the Flash versions of the effect have been the closest thing I’ve seen to the original with accurate mathematical tilting of the cover stack (and reflection) being fully supported.

MooFlow, which was one of the javascript versions I looked at wasn’t bad – it achieves a pseudo-coverflow effect using a similar layout to my first attempt at CoverFlow from last week’s post in jQuery. The biggest challenge you face when coding up this effect in JavaScript (even with a framework) is that there is no easy way to make your images angulate to the side without using some form of on the fly image processing. Some developers have tried to achieve this by using server side GD (with PHP), but I don’t believe that a true implementation of this effect should rely on anything other than client-side code.

Anyone that knows me will know that I’m a huge fan of the Canvas tag – it is by far the biggest game-changer in the Browser domain to have come along recently and has enabled developers to replicate image processing algorithms from other languages in javascript with relative ease.  The effect you will see in the demo below makes use of the Canvas, supports keyboard events, inline zoom and only takes up 25kb before minimization (without any reliance on external frameworks such as my usual favorite – jQuery). Feel free to have a play around with it :)

Related posts:

1. Open-Source JavaScript CoverFlow     Hi guys. I’m making some more of my...
2. A re-cap on the Canvas element  I thought it might be useful to write a catchup...
3. 13 Incredibly Fresh New HTML5 Canvas Demos   You all tweeted in to vote and today I’m...
4. cFlow – Coverflow for jQuery (Experimental Release)     Update: This component has been replaced by the more...
5. Why HTML5 is a Game Changer and what it means for you. Web Developers are commonly asked to create applications which stream...

Related posts brought to you by Yet Another Related Posts Plugin.