Wednesday, December 15, 2010

9:35 PM
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!

0 comments: