Automated JavaScript Vertical Flip Image Reflection
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…