Open-Source JavaScript CoverFlow
Hi guys. I’m making some more of my custom components available for download today. The Apple iTunes CoverFlow effect is one the nicest forms of visualizing albums and images that I’ve seen over the past few years and I’ve always wondered..could the effect be done using JavaScript and no Flash whatsoever?. The answer is yes and I’d like to share with you my new Pure JavaScript CoverFlow component (which doesn’t rely on jQuery, YUI or any other frameworks to work! :).
The effect is made possible using the HTML5 Canvas element which takes care of all the image processing work (eg. reflections and tilts etc). I’ve seen previous implementations that use PHP to achieve this but I think a true implementation should be able to do all of this at the client side – hopefully my version lives up to that.
For readers who haven’t checked it out before, the CoverFlow includes keyboard navigation, one-click flip and tilt access to any item in the stack, a built-in lightbox for viewing higher resolution images, HTML album previews and much more.
With release 2.0.1 one of the important things that have been addressed is increased cross-browser compatibility with Google Chrome 2.0 +, FireFox 3.5 + and Safari 4.0 also now supported. The newest version of the component can be downloaded from SourceForge via the link below. Please feel free to share it and let me know what your thoughts are on it.
Screencast: Watch this component in action right here
Demo: Launch the FireFox/Chrome/Safari compatible demo here
Download: Get the sources via SourceForge
New: You can also download an alternative version of the CoverFlow done using YUI right here.
Related posts:
- cFlow – Coverflow for jQuery (Experimental Release) Update: This component has been replaced by the more...
- An improved Javascript CoverFlow demo using Canvas and HTML5 (Firefox only) Over the past 2 weeks I’ve done a lot...
- New open-source product releases rolling out Some of you may have noticed that the site...
- 7 Really Useful Tips For Better jQuery Code I’ve been using jQuery in my web apps for...
- Offline Cross-Browser Client-Side Storage for the Web using JavaScript and a little Flash Hi guys. Today I’m going to show you how...
Related posts brought to you by Yet Another Related Posts Plugin.
19 Comments »
RSS feed for comments on this post. TrackBack URL
Leave a comment
Latest
- WanderWall – A jQuery, CSS3 & HTML5 Hover-Based Interface
- CSS3 In Under 5 Minutes – A Very Useful Screencast
- RocketBar – A jQuery And CSS3 Persistent Navigation Menu
- How To Create A jQuery Plugin In Under 5 Minutes – A Helpful Screencast
- HTML5 In 5 Minutes – A Screencast You Just Can’t Miss!
- Catch404 – A jQuery And CSS3 Modal Plugin For Handling Broken Links Elegantly
- Web Design For Every Culture (with jQuery And the Google Translate API)
- jQuery & CSS Sprite Animation Explained In Under 5 Minutes
- jQuery Vs. JavaScript – The Masters Share Their Views On Vanilla JS
- 8 jQuery Performance & Optimization Tips You Need In 2010
September 25th, 2009 at 5:16 am
This is great. I might be about to take on a photography portfolio project and this might be just the thing I'm looking for. Do you know if this will work in conjunction with various jquery plugins?
Thanks very much for sharing!
September 25th, 2009 at 5:19 am
Oh yeah, and is any of the functionality affected by the size of the photos?
September 25th, 2009 at 5:36 am
The CoverFlow is coded using pure JavaScript so if you would like to patch it up to some jQuery Plugins all you need to do is hook up the relevant functions in the Coverflow's main JS File. Hope that helps!
September 25th, 2009 at 5:37 am
You are able to specify the width and height of the photos used. As long as they all share the same dimensions you shouldnt run into any issues.
September 25th, 2009 at 12:38 pm
[...] estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]
September 25th, 2009 at 1:20 pm
[...] estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]
September 25th, 2009 at 1:28 pm
[...] Read more: Open-Source JavaScript CoverFlow | AddyOsmani.com | Where Web Businesses Grow [...]
September 25th, 2009 at 7:19 pm
[...] Link: Open-Source JavaScript CoverFlow | Demo Categorías:HTML, Javascript, Tutoriales Etiquetas:coverflow, efectos, html5, Javascript Comentarios (0) Trackbacks (0) Deja un comentario Trackbacks [...]
September 26th, 2009 at 8:20 am
Thanks very much for the answers. :thumbsup:
September 26th, 2009 at 11:04 am
[...] Open-Source JavaScript CoverFlow | AddyOsmani.com | Where Web Businesses Grow Como hacer un coverflow con canvas y javascript. Solo para navegadores modernos por ahora. (tags: howto tutorial javascript css canvas opensource) blog comments powered by Disqus var disqus_url = 'http://dubo.cl/links-for-2009-09-26/ '; var disqus_container_id = 'disqus_thread'; var facebookXdReceiverPath = 'http://dubo.cl/wp-content/plugins/disqus-comment-system/xd_receiver.htm'; var DsqLocal = { 'trackbacks': [ ], 'trackback_url': 'http://dubo.cl/links-for-2009-09-26/trackback/' }; « links for 2009-09-24 Old Popular Yolk theme for WordPress by Joshua Goodwin var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www."); document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E")); var pageTracker = _gat._getTracker("UA-5867128-1"); pageTracker._initData(); pageTracker._trackPageview(); [...]
September 27th, 2009 at 9:47 pm
[...] Open-Source JavaScript CoverFlow [...]
September 29th, 2009 at 11:31 pm
[...] Open-Source JavaScript CoverFlow [...]
October 1st, 2009 at 9:02 pm
[...] jCoverFlow en Javascript. Ver Demostración jCoverflow. vía: anieto2k y Addi Osmani Etiquetas: canvas, chrome, coverflow, firefox, imágenes, javascript, os x, safari, [...]
October 2nd, 2009 at 5:12 pm
This is awesome – do you think you could move the project to a better site than sourceforge? Google Code, Github, BitBucket?
It's a pain to work in Sourceforge.
October 2nd, 2009 at 5:31 pm
I'm glad you like it! – To get the sources from Google Code please see this entry:
http://code.google.com/p/javascript-coverflow/dow...
October 3rd, 2009 at 2:25 am
[...] estás buscando un script para hacer CoverFlow a tus imágenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]
October 3rd, 2009 at 4:08 pm
[...] Si estás buscando un script para hacer CoverFlow a tus imágenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. [...]
October 6th, 2009 at 10:59 pm
[...] estás buscando un script para hacer CoverFlow a tus imagenes en Javascript, sin duda este script Open Source te permitirá conseguirlo fácilmente. Aunque únicamente estará disponible para los nuevos navegadores (Google Chrome 2.0 +, FireFox [...]
October 8th, 2009 at 3:52 pm
[...] so powerful that it only took me about a week to create an almost perfect clone of the Apple iTunes CoverFlow effect with the canvas element. With 3D, Vector graphics and more coming to a Browser near [...]