5ThirtyOne

File this under “Finally! No more waiting for Canvas tag support!” How often have you found yourself wondering how in the world image reflections could be achieved without the need of Photoshopped elements or “IE gets the GIF while Firefox and Safari get the canvas tag”? I sure have. Fortunately, web designers are one step closer to achieving image reflections with cross browser support using the Script.aculo.us library.

reflect: function(element) {
element = $(element);
options = $H({
amount: 1/3,
opacity: 1/3
}).merge(arguments[1] || {});
// Safari's support for .complete is broken,
// so we rely on the window onload event for now
/*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);
});
}
}
Event.observe(window,'load', function(){Image.reflect('elementID')} );

Read more on the pre-production process on mir.aculo.us. Note that the concept is not yet “safe” for use so keep your britches on. Unless of course you have the itch to experiment on your own time honing the process.

My foresight of this years popular web design trends? Reflections, reflections, and what’s that..? Oh yes, image reflections.