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.
| About Ken | |
 | My mission is to demystify the world of mobile technology for general audiences and to communicate how mobile technology can enhance every aspect of our daily lives. I've been maintaining the Ken's Tech Tips website since 2004. I have experience communicating mobile technology and presenting new mobile products both online and offline, including at various trade shows and events. You can check out my profile or drop me an e-mail. |
- Apple , Javascript , Reflection , Web 2.0 , Web Development
- Comments(9)
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
Really nice mate.
I would like to have had the perspective applied to images withing my own Coverflow style gallery, called xFlow! (http://xflow.pwhitrow.com)
Have a look at this implementation using jquery and real perspective:
http://flow.momolog.info
Feedback welcome!
Cheers, Alex
Ok, sounds pretty cool but there is no link to the code. I am using a coverflow effect on my page that I paid for, but I should have done a little more research first, because noone wants to give you a useable code on trial. Ends up there is no way to center the camera on the x axis, so the slider and pics don’t line up properly. My wife thinks it looks great so I am sure the majority of my customers will, but to me it looks like crap. I have clicked the majority ofthe links on this page and have found only links to other scripts or ads. What am I missing?
It isnt wheeling. Im making my brother a website using only HTML, and he wants funny pictures on it. Help! I might take this wheel but Im looking for a Javascript that works!