Wednesday, February 21st, 2007
Automated JavaScript Vertical Flip Image Reflection
Ara Pehlivanian has created a simple reflect.js script that allows you to add reflection to your images using simple JS that adds just one DOM element.
Using Ara’s API you can get as simple as:
- var reflections = new ARA.effects.Reflection();
- reflections.addImage("myImageID");
- reflections.reflect();
or more advanced:
- var reflections = new ARA.effects.Reflection();
- reflections.addImage("me");
- var imgs = [];
- imgs.push(document.getElementById("csarvenWLGreen"));
- imgs.push(document.getElementById("microformats"));
- reflections.addImagesRaw(imgs);
- reflections.addImagesByClassName("reflect");
- reflections.addImagesByClassName("reflect1", {startPoint:"group",alpha:.75,depth:
- reflections.reflect();
There are a set of examples for you to play with too.





3.5 rating from 70 votes
The reflection images are on the page, but they are not visible and thus appears as if reflect.js is not working. Doesn’t seem to work in IE 7.0.5730.11, FF 2.0.0.1, Opera 9.10.
Same on Safari 2.0.4 on OSX the reflections not visible.
In Firefox 1.5 and 2.0 its working fine.
Firefox 2.0.0.1 is working, but they take a minute until the JS kicks in. Are you on a slow connection maybe?
BTW: great work Ara
Is making reflectors a new fad, like copying lightbox? It’s been done people, get with the program.
http://cow.neondragon.net/stuff/reflection/
http://mir.aculo.us/stuff/reflector/reflector.html
http://luminescente.com/files/imageReflection/imageReflection.html
Using Canvas to do this seems like a much more efficient way as opposed to making multiple positioned copies of the image with vertical offset (which would work but would likely kill performance under other browsers.) Looks nice!
We haven’t seen a rehashed way to do rounded corners in a while. What gives? There’s no way we’ve reached the end of innovation in rounded corners.
Let’s start some circular reference: Flashback to April 2006, where the canvas solution was already discussed in comments to the scripaculous solution
Same comments could occur, but I lost my ability to predict the future.
I’d seen the scriptaculous script here on Ajaxian a while back and knew it was really heavy on the DOM. When I got into canvas I realized it was a much more efficient way of doing it, so I wrote the script.
Unfortunately I only caught wind of an existing implementation that did pretty much the same thing (with IE support) only after I’d released mine. To be honest it was really discouraging to see.
How’s a guy supposed to know that what they’re working on already exists? Is it warranted to do an exhaustive search every time you come up with an idea before you start working on it?
@Ara; don’t be discouraged by the fact you reinvented the wheel, your wheel might even roll a bit better than the other ones, perhaps doing some more work on taking curves is all it takes. Keep coding!
I suppose next you’ll tell us all how to get animated GIFs to follow the goddamn cursor around.
Very cool. Nice job.
you could have googled for “javascript image reflection” before you started.
[manual trackback] :
Something I created this afternoon, inspired by Ara’s work. Hoho…
http://www.kunalu.com/file/reflection/
the post goes here
http://www.kunalu.com/blog/2007/02/23/reflection-on-web-page-purely-based-on-javascript-and-dom-manipulation/
I saw a variant of image reflection effect at
http://www.featurepics.com/Editorial/Image-Reflection-Special-Effect.aspx
Very nice.
So which one is least obtrusive? I seem to always have problems with that, even if a script says it’s unobtrusive.