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…★
Nice! You are all over teh javascripts lately, eh?
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
Steve: See my latest post, “Elisha Gray”
(http://arapehlivanian.com/2007/02/20/elisha-gray/)
Hi,
This is really cool. And should be quite easy to use it. I’ll give it a spin.
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 ?
Great Job, however it does not seem to be working in Safari.
-evan
Very cool. Nice job.
Nice thoughts. Really inspiring…
nice job… but in IE7 don’t work :(
Javier: I know, it wasn’t intended to work in IE. And apparently it’s buggy in Safari. :-/
Hi,
This is really cool. And should be quite easy to use it. I’ll give it a spin.
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