reflection.js: A JavaScript Reflection Effect in Less than 5K

JavaScriptSearch
Monday, May 22, 2006; 04:15 AM

Using JavaScript to create a picture reflection on a web page seem to be a spontaneously recurring idea; nevertheless, reflection.js does just that in less than 5 kilobytes of code.

It works in all the major browsers - Internet Explorer 5.5+, Mozilla Firefox 1.5+, Opera 9+ and Safari. On older browsers, it will degrade and the visitors won't notice a thing.

Applying reflection.js to a webpage is simple.  Once the javascript file is included in the head of the document, just add class="reflect" to the image and the effect is ready.

The script has seen some real world usage.  It is implemented in two plugins: Wet Floor for Wordpress, and Avatar Reflection Effect for vBulletin.

An interesting feature is the effect's ability to respond to user action.  For example, by clicking on a link or a button users can incrementally change the effect's opacity.

 The reflection effect with varying degrees of opacity.