Reflejo de imágenes con Reflection.js (y Mootools)
Hace meses atrás comentabamos de reflection.js una utilidad en JavaScript que nos permite añadir un efecto de reflejo a las imágenes. Y en digitalia encontramos una versión mejorada de la reflection.js pero para Mootools.
Comparandolo con la versión original de reflection.js, esta nueva versión tiene las siguientes ventajas:
- El reflejo aparece inmediatamente después que la imágen se ha cargado completamente. Así, si hay varias imágenes en una página no es necesario esperar a que cargen todas para aplicar el reflejo. Esto le da un mejor experiencia al usuario.
- El código es más ligero y esta optimizado para Mootools (menos de 2KB).
- Se ha corregido algunos fallos que tenia la versión original.
Uso básico
Bastará descargar reflection.js y Mootools, luego llamarlos desde la página HTML en la cabecera del documento.
<script type="text/javascript" src="js/mootools.js"></script>
<script type="text/javascript" src="js/reflection.js"></script>
Y aplicamos la clase reflect a las imágenes:
<img src="paisaje.jpg" alt="" class="reflect" />
Y listo.
No es necesario el Mootools x lo q podemos descartar la siguiente linea
Solo basta con la siguiente linea
y se aplica con la clase “reflect” y buala!