Wednesday, February 21st, 2007

Automated JavaScript Vertical Flip Image Reflection

Category: JavaScript, UI, Utility

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:

javascript

  1. var reflections = new ARA.effects.Reflection();
  2. reflections.addImage("myImageID");
  3. reflections.reflect();

or more advanced:

javascript

  1. var reflections = new ARA.effects.Reflection();
  2. reflections.addImage("me");
  3. var imgs = [];
  4.     imgs.push(document.getElementById("csarvenWLGreen"));
  5.     imgs.push(document.getElementById("microformats"));
  6. reflections.addImagesRaw(imgs);
  7. reflections.addImagesByClassName("reflect");
  8. reflections.addImagesByClassName("reflect1", {startPoint:"group",alpha:.75,depth:
  9. 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

I suppose next you’ll tell us all how to get animated GIFs to follow the goddamn cursor around.

Comment by The Hater — February 21, 2007

Very cool. Nice job.

Comment by Mukul Kumar — February 22, 2007

you could have googled for “javascript image reflection” before you started.

Comment by Karl — February 22, 2007

[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/

Comment by coolnalu — February 23, 2007

I saw a variant of image reflection effect at

http://www.featurepics.com/Editorial/Image-Reflection-Special-Effect.aspx

Very nice.

Comment by Nancy — March 2, 2007

So which one is least obtrusive? I seem to always have problems with that, even if a script says it’s unobtrusive.

Comment by dotnetCarpenter — March 13, 2007

Leave a comment

You must be logged in to post a comment.