Reflecting with JavaScript

"It's always refreshingly nice to see what a few lines of Prototype and Script.aculo.us code can do"

JavaScriptSearch
Friday, April 28, 2006; 03:32 AM

The creator of Scrip.aculo.us Thomas Fuchs has unveiled a new technique, which creates a reflection of a picture on a webpage.  The "special effect" is implemented using the Prototype and Script.aculo.us libraries.   The technique was first described at Fuchs' blog at http://mir.aculo.us/ .  An example is available at http://mir.aculo.us/stuff/reflector/reflector.html .

To implement the Reflector, first include the Prototype and Script.aculo.us libraries in the document head:

<script src="prototype.js" type="text/javascript\"></script>
<script src=”scriptaculous.js” type=”text/javascript”></script>

Then include the function:

var Image = {
reflect: function(element) {
element = $(element);
options = $H({
amount: 1/3,
opacity: 1/3
}).merge(arguments[1] || {});

if(!element.complete) {
setTimeout(function(){Image.reflect(element,options)}, 10);
return;
}

var p = element.parentNode, n = element.nextSibling;
var d = 1.0/(element.height*options.amount);

(element.height*options.amount).times( function(line) {
var h = Builder.node('div',{style:'height:1px;overflow:hidden'},
[Builder.node('img',{src:element.src,
style:'margin-top:-'+(element.height-line-1)+'px'
})]);
p.insertBefore(h,n);
$(h).setOpacity((1-d*line)*options.opacity);
});
}
}

Call the new method, citing the image’s div id as the parameter

Image.reflect('id');

The reflection effect is ready!