reflect.js + Mootools

Reflejo automático en tus imágenes

En los últimos tiempos y seguramente gracias a la gente de Apple, hemos podido ver cómo el diseño web se llenaba de reflejos, de imágenes que se reflejan en el suelo dando una sensación de profundidad.

Si vamos a hacer un diseño en el que la imagen va a permanecer, cogemos el photoshop y en pocos pasos le crearemos el efecto deseado, pero si se trata de una página dinámica en la que queremos aplicar ese efecto a la imagen que en esos momentos esté apareciendo, lo más cómodo será usar este script.

Como vamos a ver, el uso es verdaderamente sencillo y las ventajas enormes.

El creador es reflection.js, genial, simplemente agregando la clase class=”reflect” podemos dar el efecto deseado a cualquier imagen de la web.

Ahora he encontrado una versión mejorada para Mootools, a favor tiene que cada efecto se carga con su respectiva imagen, no hay que esperar a que se carguen todas las imágenes de la página y además  se ha optimizado para su uso con Mootools, esto se traduce en apenas 2Kb de peso frente a los casi 5 del anterior. En cualquier caso se trata de pesos perfectamente asumibles.

Es compatible con todos los navegadores actuales, incluido el chrome. Lo mejor, por lo que he oído, es que no presenta problemas en aquellos navegadores que no lo soportan, simplemente no aparece el reflejo y punto.

Cuando se trate de un gif animado sólo se verá reflejado el primer frame

Usarlo es muy sencillo, basta con hacer la llamada en nuestra página a los dos js (reflection y Mootools) y luego cada vez que queramos aplicar el efecto, meterle a la etiqueta de la imagen, la clase class=»reflect»