Coverflow, anyone?

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!

35 Comments

Eduardo Lundgren  on May 31st, 2008

Congrats Paul!

It’s amazing. The transitions are perfect on Safari. Let wait together a perspective matrix on safari to add on this fantastic plugin :)

It’s a very good addition to jQuery UI.

Tom  on May 31st, 2008

very neat piece of work paul. i like the effect even in other browsers for there it’s not THAT apple like (yes, that sometimes COULD be something desirable ;)) and may be even somewhat more interesting indeed.

Ajaxian » Using CSS transforms to Build a Coverflow Effect  on June 2nd, 2008

[...] new possibilities. LifeRay’s Paul Bakaus has been experimenting with the new feature and was able to create a cool iTunes-like coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics. This [...]

Henrik  on June 2nd, 2008

Cool, you could use -webkit-transforms: perspective(bork bork); to make a real 3D effect, and not that isometric 3D.

Javascript News » Blog Archive » Using CSS transforms to Build a Coverflow Effect  on June 2nd, 2008

[...] new possibilities. LifeRay’s Paul Bakaus has been experimenting with the new feature and was able to create a cool iTunes-like coverflow effect that actually flows and animates in real-time, without using canvas or prerendered graphics. This [...]

bernard  on June 3rd, 2008

Hi Paul,
Nice work. I think I found a bug. Not sure if it’s yours or Safari’s ;) When moving slider from right to left, right hand side edge of images does not disappear.
http://imagebin.org/19343
Found on Safari 3.1.1 (525.17)

Christof Haemmerle  on June 3rd, 2008

cool paul, really amazing and fast

blago  on June 3rd, 2008

Works fine in FF3

kourge  on June 3rd, 2008

The values used for the matrix transform can be tweaked a tiny bit more to look better. Instead of multiplying mod by 0.5 or -0.5, change it to 0.25 or -0.25. Set -webkit-transform-origin to “top center”. Lastly, remove the gray borders and this 2D coverflow will look ever so real.

James Urquhart  on June 3rd, 2008

Nice work, Paul!

Which reminds me, i made a clock using JS + CSS transforms a while ago. Everything (digits, hands) positioned using CSS transforms. Was quite neat to get working.

http://www.cuppadev.co.uk/2008/03/20/an-analogue-clock-using-safari/

Keep up the good work. :)

Radoslav Stankov  on June 4th, 2008

It looks really great. But for the first few seconds it hard to get used to it. And it will be also super if you add mouse stroller to work the slider.

Dailyhtml » Coverflow effect in Safari  on June 6th, 2008

[...] You can see a demo if it in action here or see the main page for info [...]

Bram.us » jQuery Coverflow  on June 9th, 2008

[...] jQuery Coverflow plugin made by the lead jQuery UI developer, using Webkit’s CSS Transforms (viz. check it in [...]

jQuery UI v1.5 is Out :: WPLover  on June 10th, 2008

[...] jQuery awesomeness. Imagine doing Mimbo Pro’s news carousel with the jQuery coverflow plugin. And then [...]

jQuery UI v1.5 Released, Focus on Consistent API and Effects « outaTiME  on June 10th, 2008

[...] also planned plugins using new technologies like Webkit’s css transforms (see the recent coverflow plugin), so stay [...]

links for 2008-06-11  on June 11th, 2008

[...] The Sea of Ideas » Blog Archive » Coverflow, anyone? (tags: css design development javascript jquery safari ui web webdev) [...]

Tunafish  on June 25th, 2008

http://194.95.111.244/~countzero/myCMS/index.php?c_id=5&s_id=21

Now if you could port that to JQuery…..
Yours is nice too, but I prefer without the transform. Scaling height looks more natural to me.

The Sea of Ideas » Blog Archive » Bringing CSS Transform to Internet Explorer  on August 16th, 2008

[...] useful for matrix multiplication!) and jQuery (was already included there, obviously) into my last blog post’s entry Coverflow, and from then it’s prety straight forward – reload Internet Explorer, and you should have [...]

john.jones.name  on August 25th, 2008

I really want to include this type of efect on my webpage so I came across your page

only thing is it’s not useable today at all !

while mootools effect actually is http://www.outcut.de/MooFlow/MooFlow.html

is this possible with jquery ?

regards

John Jones
http://www.johnjones.me.uk

Alex  on October 22nd, 2008

Love the effect, but either I am completely going crazy or I’m seeing a miracle. I just tested it in IE7 just for laughs and giggles, and low and behold, it works in IE7 (at least mine)…

So yeah…

amir  on October 26th, 2008

A really nice effect :]

I was wondering though how to make a dialog in dojo like the one appearing on the dojo.workers() page, after you click the question mark.

I spent some time googling, but no luck so far. I see there’s a dijit dialog thingy, but I’d like the complete behaviour of the mentioned dialog.

Any hints/links much appreciated :)

30 Essential Controls  on January 31st, 2009

[...] by: Flex, Prototype/script.aculo.us, JQuery, MooTools, Silverlight [...]

Designing for RIAs: 30 Essential Controls « Theresaneil’s Weblog  on February 4th, 2009

[...] by: Flex, Prototype/script.aculo.us, JQuery, MooTools, RadControls for [...]

30 Essential Controls « Theresaneil’s Weblog  on February 4th, 2009

[...] by: Flex, Prototype/script.aculo.us, JQuery, MooTools, RadControls for [...]

Leo Lima Programador Web  on February 23rd, 2009

nice effect, congratulations

6 must see sites with unique keyboard navigation  on March 1st, 2009

[...] to implement custom navigation with the keyboard. Another one which has popped up recently is the jQuery Coverflow plugin by Paul Bakaus. Other contenders for the throne include this one I found via LastNight’s [...]

Give your Web Interface a Great Look | Expertz  on April 24th, 2009

[...] by: Flex, Prototype/script.aculo.us, JQuery, MooTools, RadControls for [...]

Liam  on May 28th, 2009

I can’t get this working with the latest jQuery & jQuery-UI.

Anyone had any look with this?

Max  on June 24th, 2009

Check this implementation: http://elmasse.gaver.nl Just javascript+canvas+YUI

Derek Perkins  on July 14th, 2009

I was looking at the source to see how this was done, but it seems to be split up between a number of .js files. Is there a better way to approach an implementation on my own website?

Paul Whitrow  on July 30th, 2009

Nice work mate.

I have a coverflow style script myself that is available for download. It’s called xFlow! and is available here:

http://www.pwhitrow.com/blog/entries/2009/04/06/xflow-a-javascript-and-php-based-coverflow-style-gallery/

Hope some of you can make use of it.

herringtown  on October 14th, 2009

paul — even without the webkit css transformation, very little work would need to be done for this to gracefully degrade for use in other browsers.

Its fairly usable in FF — esp if you take away the bounding element borders.

Obviously it looks super-cool in safari/webkit :). I’m really in need of a jquery cover flow — any chance of you doing a couple of enhancements on this to get it committed to jqueryUI ? :)

Currently, am thinking about just popping in MooFlow, but I’d prefer not to go outside of jquery…

Have a comment or question?