The inspiration
So I was looking at all the nice things the WebKit folks did, and one particular feature really got his way into my thoughts, and I was playing with possible usecases for weeks.. I’m talking about the CSS transforms.
This handy nifty new css feature allows you to do all kinds of 2d transformations on any element on the page, by utilizing custom CSS tags. This means you can rotate and translate DOM elements, but you can also use a generic matrix function to do whatever you want.
So here is where it get’s interesting. The fun thing about CSS Transforms is that they work today, in Safari 3.1, and on the iPhone, not only in one of the nightly builds, so it’s possible to target real-world users.
So now that I had all this power, I didn’t know what to do with it, until I remembered that I always wanted to do a cool iTunes like coverflow effect, already seen countless times in flash. Also helping me to remember was an Ajaxian post about the dojo.workers a couple of days ago, which features the same coverflow effect, done by Peter Higgins.
While this dojo.workers example is absolutely fantastic work and looks brilliant however, it doesn’t feel quite like the effect: You can’t scroll at once through many items, there’s no real animation (the images are already prerendered).
The result
So after a couple hours of work, I was able to create a coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics.
While impossible to do a real perspective transformation using WebKit right now (that would require a 3d affine matrix), I’m using the matrix and scale css functions to create a somewhat similar experience, along with some viewport and zIndex logic.
To make a nice demonstration, it uses jQuery UI to create a actual coverflow widget, and jQuery UI’s slider to be able to slide through. You can also navigate through the items by clicking on them or using the left/right keys on your keyboard.
For those of you who would like to know how I was able to create the real experience: The refresh() function that updates the viewport does unlike other examples (i.e. frash coverflow scripts) not only handle single animations, but is capable of doing true half-state renderings. Right now, this is not shown too much in the demo, but it would be actually possible to change the next/prev keyboard behaviour to not move from one item to the other, but render each single half-state inbetween.
Finally, for those of you wondering if this will become a real plugin: Indeed, it’s already commited in the 1.7 branch of jQuery UI, and along with other Webkit specific plugins, come to UI in the near future. I’ll keep you updated!
I finally combined two interests of mine into one: My love for Japan and my day job. From May 14th to May 20th, I will be in Tokyo participating and speaking on two great conferences.