inicio mail me! sindicaci;ón


Coverflow has become a de facto visualization standard for the presentation of collections of images, be it covers or portraits.
There are a number of implementations for usage on web pages (e.g. this one) but the usable ones require Adobes Flash and thus won’t run on the iPhone.

When looking for HTML5 canvas based implementations I found this promising implementation based on the YUI library.
Though workig, it has three major drawbacks: It is rather overengineered and difficult to tweak, it uses YUI (whereas I prefer the more lightweight jQuery) and it performs poorly with image sizes bigger than thumbnails.

After trying to change the code for a while I decided to do a reimplementation in jQuery. The result can be seen on the MomoFlow demo page. Here are two screenshots:

CoverFlow using canvas and jQuery

CoverFlow using canvas and jQuery

Quicklook mode

Quicklook mode

The used 3D transformation is superbly described on the YUI blog .

My implementation caches the rendered canvases per rendering angle. Further speed increments are made possible by adjusting the mesh width used for the slicing transformation depending on the achieved framerate.

The result performs beautifully in recent Safari, Chrome and Opera, decently on Firefox. It also works flawlessly on the iPhone. Keyboard control is coming soon.

I do still need help on IE, maybe the image composition is too demanding for ExplorerCanvas
The code is available on github:
Comments and improvements are very much welcome!

HCL said,

Dezember 1, 2009 @ 4:05 pm

via @kosmar

mmh. with a macbook (non-pro), firefox and PS open at the same time, it is not really smooth at all.
the transitions are nice, but it misses any “snappyness”…
I should have a look on the YUI version, and I am shure it is worse.
but I would not want to use it like that.

HCL said,

Dezember 1, 2009 @ 4:15 pm

I checked again with safari and it feels better significantly…
a cute feature loosing its charme completely when viewed under not-so-perfect conditions (browser/ram that is.)

Andy Dust said,

Januar 18, 2010 @ 9:00 pm

Nice work.

It’s a bit jerky though (firefox on ubuntu linux).

Would be nice if it ‘flowed’ whilst dragging the slider handle as for larger sets I could image it might get difficult to navigate accurately, although I imagine this would effect performance.

tim said,

Januar 22, 2010 @ 12:42 am

after the first time every image is rendered once it is really smooth. Would it be faster without the shadow?

aljoscha said,

Januar 22, 2010 @ 8:42 am

Drawing the reflection (done once per image) is relatively cheap. Of course it also makes every image 50% bigger (for a reflection ratio of 0.5), resulting in slower rendering from then on.
The more time consuming part is rendering the perspective, though. Every image has to be scaled/sliced 20-50 times for every angle.

There is an option to pre-render all angles for all images, resulting in 10-20 seconds initial waiting and smooth animation afterwards.

Vu Xuan Cuong said,

Oktober 21, 2010 @ 4:48 am

Hello all guys,
This is awesome cover flow.
Thank you to make this plugin. But it is not run on IE.
When we can use this for IE?
Thank you to update this.
Have a nice day.

aljoscha said,

Oktober 22, 2010 @ 6:29 pm

As mentioned briefly in the article: canvas support is needed for this to work. But – exciting news – the canvas element is coming to IE9, so this will hopefully work without any tweaks on IE9 too.

faizal said,

Juni 7, 2012 @ 7:27 pm

This is awesome cover flow.
how to add next and previous button ?
thank you.

RSS feed for comments on this post · TrackBack URI

Hinterlasse einen Kommentar