Image Reflection with jQuery and MooTools

One subtle detail that can make a big difference on any web design is the use of image reflections. Using them too often can become obnoxious but using reflections on large, "masthead" images is a classy enhancement. 

Unfortunately creating image reflections within your graphics application can be time-consuming, especially when an image can potentially change frequently. Luckily Christophe Beyls has created Reflection.js.

Reflection.js is a JavaScript utility available in both jQuery and MooTools that creates reflections for any images in a page. Reflection.js creates a new IMG element with special filters if the client is using IE — if the client is not IE, Reflection.js creates a CANVAS element and constructs the reflection within the canvas.

The HTML

<img src="cricci-player.jpg" alt="Christina Ricci" class="reflect" />

Add the reflect CSS class to any image you'd like to reflect.

The MooTools JavaScript Usage

window.addEvent('domready',function() {

var options = { height: 0.5 };

$$('img.reflect').each(function(img) {

img.reflect(options);

});

});

The MooTools version of Reflection.js implements the reflect method to create reflections.

The jQuery JavaScript Usage

document.ready(function() {

var options = { opacity: 0.75 };

$('.reflect').reflect(options);

});

Much like MooTools method, you execute each element's reflect method.

Christophe's Reflection.js code is a great piece of work! Don't waste time making reflections in Photoshop — use the power of JavaScript!