Create image reflections using Script.aculo.us

No more need for faux image reflections!

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.

Discuss - 6 Comments

  1. rabsteen says:

    wild. thanks for the info.

  2. Adam says:

    Cheers for that, very handy!

  3. AsceticMonk says:

    This is cool! I think once the technique is mature and stable enough, image reflection will be all over the web.

  4. reflection says:

    One more variant of vertical image reflection at
    http://www.featurepics.com/Editorial/Image-Reflection-Special-Effect.aspx

    I like a lot your “My foresight of this years popular web design trends? Reflections, reflections, and what’s that..? Oh yes, image reflections.” Good one!

  5. agouti says:

    this script didn’t work with last version of sciptaculous and prototype, do you know how to update the code for making working again ? Thanks