Efecto reflejo en imágenes con javascript y HTML

En el siguiente artículo vamos a explicar cómo realizar el común efecto reflejo de imágenes de una forma fácil y sin tener que recurrir a la utilización de filtros y aspectos poco documentados. El método se basa en una librería javascript programada por neondragon.net, y que es totalmente compatible con los principales navegadores actuales en su versión 2.0, incluyendo google Chrome.

Para poder utilizar los efectos y métodos de la librería, lo primero que tenemos que hacer es descargarla e incluirla en nuestra página:

 

<script type="text/javascript" src="reflection.js">

Recordamos que en el campo src tenemos que poner la ruta de la librería reflection.js, en nuestro caso es el mismo nombre porque se encuentra en el mismo directorio que nuestra página.

Ahora solo tenemos que a las imágenes que queramos aplicar el efecto espejo, asignarles la clase “reflect”.

 

<img src="img_ex_04.jpg" class="reflect" />

Con esto, conseguimos que esta imagen se refleje. Por otra parte, si queremos jugar con la opacidad de la imagen reflejada o con el tamaño que se refleja, podemos agregar a la clase unos atributos:

 

rheight##, este atributo asigna el alto de la imagen reflejada mediante un numero entre 0 y 100 colocado en los ##.
ropacity##, este atributo asigna la opacidad de la imagen reflejada mediante un numero entre 0 y 100 colocado en los ##. 

<img src="img_ex_04.jpg" class="reflect rheight20 ropacity50" />

Esta librería, cuenta con algunos métodos más que nos permiten crear estos efectos al generar eventos, para más información visita la página neondragon.net o estudia los ejemplos del articulo.

 

 

Descarga los Ejemplos del articulo