Reflejar imagenes con javascript
Abril 7th, 2007 | Publicado por Francisco en Javascript | 1 Comentario
En nuestro artículo “Reflejar objetos o texto con Photoshop” te enseñamos a hacer el efecto de reflejo en las imagenes con photoshop y ahora te mostraremos un script que puede hacerte esta misma función. El script se llama Reflection y trabaja de una manera muy sencilla:
- Descarga el script desde aquí o en su página oficial.
- Dentro del .zip encontraras un archivo llamado reflection.js, descomprimelo y subelo a tu host propio o gratuito.
- Llama al script desde tu web, esto es, coloca la referencia entre las etiquetas <head></head>:
<script type="text/javascript" src="reflection.js"></script> - Lo siguiente es utilizar el script. El script funciona sencillamente al aplicar una clase predifinida a la imagen, esta clase es “reflect”, por ejemplo:
- Otra utilidad importante del script es que puedes controlar la opacidad y esto se hace agregando tambien una clase a la imagen, pero esta vez, contiene el porcentaje de opacidad deseado, por ejemplo, la clase “reflect rheight50” producira una imagen reflejada con 50% de opacidad, la clase “reflect rheight80” producira una imagen reflejada con 80% de opacidad y así para la opacidad que deseemos.
<img src="iglesia-de-tlayecac.gif" class="reflect" alt="Iglesia de Tlayecac">Que da como resultado lo siguiente:
Este script tiene por ahi, un par de opciones más que puedes encontrar desde su página principal, pero estas son las más utiles. El efecto de reflejo que brinda este script es muy bueno y de mucha ayuda si queremos darle reflejo a muchas o todas nuestras imagenes.
