Javascript Coverflow & Scroll Wheel Script
March 24th, 2008
Coverflow in Javascript seems to be a big trend at the moment. Raith created an absolutely stunning script which implements not only a coverflow in Javascript complete with angled images and reflections, but a iPod-style scroll wheel in Javascript.
Raith writes:
Hiya. I’ve worked plenty more on my “CoverFlow” javascript and present the first release here. The CoverFlow and the PodNav items below are 2 entirely separate modules which just happen to work really nicely together. You can happily use either one without the other. The CoverFlow can be as wide as you want and use any size (square) images.
I’m not even entirely sure how the angled images are created in Javascript but it’s certainly not lots of divs and it’s very very fast. Also, the script seems to be surprisingly small in download size. Simply stunning.
- Apple , Javascript , Reflection , Web 2.0 , Web Development
- Comments(5)
Digg
StumbleUpon
Wow, what an honour to be blogged by Cow. Very cool.
The scroll wheel thing was written over a year ago and was only intended to scroll text in a div. I’ve never actually used it on a live site but boy was I glad I had it lying around when I did the next bit!
As soon as I bought myself a 3g iPod nano I knew I had to do something CoverFlow-like in js. It only took a few hours to prove the concept and then I spent all of yesterday refactoring it to include the gorgeous reflections courtesy of this very site.
Originally I had slants on both the top and bottom edges but adding the reflections meant I had to drop the bottom one. The reflections absolutely make it though so it was well worth the sacrifice.
And a note about that slant on the top - don’t get at all excited about it… If I was doing it properly then I’d render a perspective distortion into a canvas object. As it is, all I do is overlay a top border (with transparent left/right border to make it slant). The image stays straight and just has a big chunk hacked off. It’s very ugly when it’s static, but when it moves the brain tends to be forgiving
I tried a lot of different settings for the spacing and decided that I don’t like the covers overlapping. Also, if the covers overlapped then the reflections would too and that simply wouldn’t be realistic.
The only novel feature here is that the end-on covers have a bit of thickness. It was a real afterthought and there’s a note in my script file explaining how messy it is. It helps a lot though.
I’m slightly ashamed of my code as I’d like to go to programming heaven. That said, I’m very pleased with the end result. And, as Cow said, it is small and FAST.
Thanks mate for the coverage ;^)
Raith
Hi Raith,
The conciseness of your code more than makes up for that! I remember I used to be really, really perfectionist with my code! It did end up being very counter-productive with endless refactorings upon rewrites!
What really impressed me was the animations, the illusion of images having perspective and the speed of the whole thing! I’m not sure how far you want to take the script but it might be well worth submitting it to some sites like Ajaxian who will love to feature your script!
Hi again,
I hadn’t really intended to expose this to a wide audience of pedantic peers, but what the hell! I’ve added a comment to the Ajaxian blog entry about ProtoFlow…
http://ajaxian.com/archives/protoflow-coverflow-for-prototype
They were rather critical of that script so I expect I’ll be putting out flames too
Now I really want to learn how to use this canvas thing. It’s what I’ve always wanted but currently don’t have time to play with. Grrrrr…
I’ll start by taking apart this cool reflection code ;^)
Great
You could try sending them an email at ajaxians@ajaxian.com too where it might get seen and put on their main webpage… I’m pushing this script because I really do like it!
great work,
where can i download it, so that i can test it,
thanks
kacem