When I was refreshing my labs and updated them to fit the corporate Dextrose design (http://labs.dextrose.com), I quickly figured that I wrote quite a few plugins in the past that still deserve a lot more attention, because they are..well… kind of awesome.

In order to receive more attention, plugins like Coverflow need a kickass demo. Before, I only had small image demos in a small canvas, which weren’t quite as effective, so I decided it’s time for a killer mashup: Meet the Coverflickr.

The Coverflickr is a mashup experiment to show the beauty and flexibility of the Coverflow plugin while making use of a multitude of new HTML5 features. It’s an interface for browsing Flickr’s interesting images in a graphically sophisticated way. It is best experienced in Safari (even better : Latest webkit nightly!) or Chrome, although it will run smoothly in Firefox 3.5+ (minus preview animations and reflections). Here’s the techniques that are being used in the Coverflickr for those who care:

  • CSS box reflections combined with CSS gradients for the reflections
  • CSS Transforms for the preview mode and within the coverflow plugin
  • CSS Transitions for the preview mode and the alternate mode switching animation
  • YQL for the fetching of the images

There are a couple not immediately visible but pretty neat features going on here. For them, I had to significantly alter the coverflow plugin (soon to be released in a new version):

  • Endless browsing. When coming to the right end, it fetches more images, appends them to the list and refreshes the coverflow with the new method “refresh
  • Alternate transformations.Click on the bottom link “Alternate version” and the transformation will animate live into another one now using rotations. The coverflow plugins transformations can now be exchanged on the fly through the “transformation” option.

This has been an incredibly fun demo to do, and I realized it wouldn’t be possible to do so without the help of the Webkit project, pushing the web like nobody else. I therefore dedicate this demo to the Webkit team, my personal heros that are not afraid to pioneer new features for the greater (web developer) good.

Enjoy, and let me know if you like what you see (also if you don’t, but please be kind)!