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.

Posted by Dion Almaer at 8:45 am
15 Comments

3.5 rating from 70 votes

15 Comments »

Comments feed TrackBack URI

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.

Comment by Ed — February 21, 2007

Same on Safari 2.0.4 on OSX the reflections not visible.
In Firefox 1.5 and 2.0 its working fine.

Comment by Andreas — February 21, 2007

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

Comment by Joshua Jonah — February 21, 2007

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

Comment by George Popov — February 21, 2007

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!

Comment by Scott Schiller — February 21, 2007

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.

Comment by Andy — February 21, 2007

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.

Comment by Chris Heilmann — February 21, 2007

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?

Comment by Ara Pehlivanian — February 21, 2007

@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!

Comment by Marc — February 21, 2007