David Walsh Blog

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!