Automated JavaScript Vertical Flip Image Reflection

Tuesday, February 20th, 2007

Do you see it? Look closely, now do you see it? Look around the site a little. If you’re using either Firefox 1.5+, Safari or Opera 9+ you should be seeing a reflection under the images in the post body–thanks to the Reflection script I just wrote. No Java applets, no Flash, just pure JavaScript. And it’s relatively light and fast too–each reflection consists of just one new DOM element. Here, check out this example page.

The script allows you to modify opacity and depth and comes with three different ways of passing images to the reflection object (by ID, by class name or just a raw array you build yourself).

A basic implementation looks like this:

<script type="text/javascript" src="reflect.js"></script>
window.onload = function(){
	var reflections = new ARA.effects.Reflection();
		reflections.addImage("myImageID");
		reflections.reflect();
}

A more advanced implementation looks like this:

<script type="text/javascript" src="reflect.js"></script>
window.onload = function(){
	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:10});
		reflections.reflect();
}

The JavaScript code is documented as well so you should be able to get a head start. I’ll write up more detailed docs if and when interest grows. If you’re interested in implementing it on your own site you can download the reflect.js file or the entire zipped example. Remember, the script only works on Firefox 1.5+, Opera 9+ and Safari (though I’ve only tested it on Firefox so let me know if it works on the others).

Enjoy! And as always, your feedback would be much appreciated.

Update: In a turn of dumb misfortune, I found out after releasing this, that someone had already coded an extremely similar implementation (with IE support) last year! Oh well, you do what you can I guess…

Sphere: Related Content

Comments closed

18 Comments

Luke says:
February 20th, 2007 at 10:58 am
Nice! You are all over teh javascripts lately, eh?
steve says:
February 20th, 2007 at 6:57 pm
This site (not mine):
http://cow.neondragon.net/stuff/reflection/

Created a JS implementation for this also, that works in IE too, by using IE’s Alpha Transformations…

I hate to extend a hand to IE here, but since so many users haven’t abandoned it yet (oh my, was that a dig?… oh dear), adding similar functionality to your script might be handy.

Cheers,
Steve
Ara Pehlivanian says:
February 20th, 2007 at 7:06 pm
Steve: See my latest post, “Elisha Gray”

(http://arapehlivanian.com/2007/02/20/elisha-gray/)
AJ says:
February 21st, 2007 at 1:13 pm
Hi,
This is really cool. And should be quite easy to use it. I’ll give it a spin.
Arash says:
February 21st, 2007 at 3:56 pm
Good job :-) Also any way it could be developed such that one could animate it (resize, move, fade in out, turn) the image while the reflection stays intact ?
evan says:
February 21st, 2007 at 5:59 pm
Great Job, however it does not seem to be working in Safari.

-evan
Baz Web Development: AJAX, Joomla, CSS » Blog Archive » More JavaScript Reflections - Automated JavaScript Vertical Flip Image Reflection says:
February 21st, 2007 at 10:25 pm
[...] not sure what to make of this: Automated JavaScript Vertical Flip Image Reflection. It adds reflections to images using JavaScript. But, am I missing something here, or has it [...]
Mukul Kumar says:
February 22nd, 2007 at 3:26 am
Very cool. Nice job.
coolnalu says:
February 23rd, 2007 at 1:01 pm
Nice thoughts. Really inspiring…
Dawn of Hero [英雄的黎明] » Blog Archive » Reflection on Web Page, Purely based on Javascript and DOM manipulation says:
February 23rd, 2007 at 5:54 pm
[...] morning, from Ajaxian.com, I saw link to a post in which the author mentioned his reflection generating script. It’s implemented based on canvas, which isn’t supported by IE at all but sufficiently [...]
Javier Narese says:
February 25th, 2007 at 4:58 pm
nice job… but in IE7 don’t work :(
Ara Pehlivanian says:
February 25th, 2007 at 5:06 pm
Javier: I know, it wasn’t intended to work in IE. And apparently it’s buggy in Safari. :-/
Alessandro Melandri » Blog Archive » Javascript image reflection says:
February 26th, 2007 at 4:56 am
[...] Pehlivanian has just released a nice javascript that creates vertical flip image reflections adding only a DOM element. This really nice! Check it [...]
Mike Smith says:
February 27th, 2007 at 5:31 pm
Hi,

This is really cool. And should be quite easy to use it. I’ll give it a spin.
spring-coming says:
March 2nd, 2007 at 5:28 pm
nice! but doesn’t work in IE 6.0

I saw excellent image reflection examples at

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

I think neondragon.net script has been used
Blog de programación » Archivo del weblog » Imágenes con efecto espejo (con Javascript) says:
March 6th, 2007 at 6:22 am
[...] La web del autor [...]
Givatry » Archive » JavaScript/DOM Reflector says:
March 16th, 2007 at 10:10 pm
[...] morning, from Ajaxian.com, I saw link to a post in which the author mentioned his reflection generating script. It’s implemented based on canvas, which isn’t supported by IE at all but sufficiently covers [...]
Melandri.net » Javascript image reflection says:
September 30th, 2007 at 5:52 am
[...] Pehlivanian ha appena pubblicato un fantastico javascript che permette di aggiungere alle immagini un riflesso verticale aggiungendo solamente un elemento [...]