Reflection es un pequeño script que nos permite generar efectos de reflejo en las imágenes.
Para usarlo, descargamos el ZIP
que contiene el código y algunos ejemplos y luego, alojamos reflection.js en un servidor como SkyDrive y lo cargamos en la plantilla, antes de </head> o directamente en el post donde queremos aplicarlo:
Para usarlo, descargamos el ZIP
que contiene el código y algunos ejemplos y luego, alojamos reflection.js en un servidor como SkyDrive y lo cargamos en la plantilla, antes de </head> o directamente en el post donde queremos aplicarlo:<script type="text/javascript" src="URL_reflection.js"></script>Una vez hecho esto, usarlo es muy siencillo, basta agregar la clase CSS a la imagen:
<img class="reflect" src="URL_imagen" />Por defecto, el reflejo creará un fade que coincidirá con el color de fondo de la página o del DIV donde se coloque y tendrá una opacidad del 50% y una altura total de 1.5 veces la altura de la imagen original:
Ambos parámetros pueden ser controlados:
class="reflect rheight100" hará que el reflejo sea igual a la altura de la imagen
class="reflect ropacity30" cambiará la opacidad
o combinarse:
class="reflect rheight100 ropacity30"
class="reflect rheight100" hará que el reflejo sea igual a la altura de la imagen
class="reflect ropacity30" cambiará la opacidad
o combinarse:
class="reflect rheight100 ropacity30"
La clase también pude ser controlada con JavaScript. Por ejemplo, podemos tener una imagen normal y agregarle el efecto al hacer click sobre ella:
O bien, remover el efecto.
También es posible crear alguna función y utilizarla para variar el efecto a medida que hacemos click:
<script>
var cool = 2;
function varyReflect() {
if (cool == 10) {cool = 1;}
Reflection.add(document.getElementById('demoReflejoVariable'), { opacity: cool/10 });
document.getElementById('demoReflejoVariable').innerHTML = cool*10;
cool++;
}
</script>
<img src="URL_imagen" id="demoReflejoVariable" onclick="varyReflect()" />
Bueno, espero que se haya entendido ...
