Monday, August 27th, 2007

Reflex: Cover flow for your soul

Category: Canvas, JavaScript

Christian Effenberger, Canvas Library Creator Extraordinarie, has created Reflex.js 1.1, which allows you to add a Cover Flow effect (including reflection) to images on your web pages.

It works in all the major browsers – Mozilla Firefox 1.5+, Opera 9+, IE6+ (tilting missing) and Safari. On older browsers, it’ll degrade and your visitors won’t notice a thing.

As per usual, usage is via a simple microformat using CSS classes such as reflex iopacity75.


Posted by Dion Almaer at 8:35 am

4.2 rating from 83 votes


Comments feed TrackBack URI

Really slow, but the effect is really nice.

Comment by Jon Hartmann — August 27, 2007

How is it done?

Comment by Drew — August 27, 2007

Really nice, but as mentioned above not very fast.

In addition: tilting works in IE6 for me
Its also mentioned on the authors website.

Comment by Moritz Kröger — August 27, 2007

He uses canvas to achieve the effects. However, this is far from coverflow. It only renders the images, but does not implement the interactive functionality such as actual browsing.

Considering the rendering speed just to do the 3 images, it might be difficult to achieve ajax based coverflow with this library.

Comment by wayne pan — August 27, 2007

Being able to use javascript to show an image reflection is a huge time-saver for a programmer with little design/Photoshop ability. This one is pretty slow, but great work.

Comment by David Walsh — August 27, 2007

Using CSS classes in that way is not a microformat. Microformats are agreed standards for semantic classnames, documented on the official microformats site.

Comment by John — August 27, 2007

For real coverflow (with animation) I think only flash will cut it. I just don’t see canvas being powerful enough for something like this.

Comment by Joeri — August 28, 2007

Leave a comment

You must be logged in to post a comment.