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()" />
8 comentarios:
Los efectos de reflejo los había visto pero no esa opción de cick, claro que eran con generador.
Tengo ganas que me sorprendas con alguna librería para mostrar imágenes ;)
Cada vez me sorprendes mas mi estimado Jmiur, tengo un nuevo blog en blogger sobre fotografías amateurs (osea hechas por mi) :P y quizá en algún momento me sirva esta técnica..
les dejo el link por si alguien quiere ver mi galería.
http://loquehayqueverxahi.blogspot.com/
!Qué buen efecto! ;) otra cosita para practicar!! :D
Me encantan los reflejos en cuanto pueda los probaré ^_^
Una pregunta, puse el feed de mi otro blog en twitter, copie la misma condicionante de BLOGGER: pero con otro nombre y url, me aparece el titulo del post pero no me cambia MIBALCON: por la imagen escogida.
Tengo que agregar algo o cambiar algo más? porque porque cambie todo pero el class bloggerTW lo dejé igual
besos ronroneados
Que tengas una linda semana
Me gusto eso de permitir cambiar con clicks. Tambien podría usarse el mouseover.
Las imágenes siguen siendo imágenes así que los textos pueen ponerse en cualquier lado. Las imágenes pueden ser enlacs, flotar o tener cualquier otro tipo de propiedad; en ese sentido es muy flexible.
Pau: Me costó pero ya entendí. No sé si podré explicarlo acá pero lo intento, cualquier cosa me mandas un mail.
Esto es lo anterior
var nuevoPost = posttext.substr(0,9); // detectar ...
if (nuevoPost == 'BLOGGER: ') {
var finalTW = posttext.substr(9,posttext.length);
..............
}
Dice 9 porehq el texto a reemplazar tiene 9 caracteres Ahor le ponemos el segundo pero, no leemos 9 sino 10 porque hay 10 caracteres; entonces repetimos
var nuevoPost = posttext.substr(0,10); // detectar ...
if (nuevoPost == 'MIBALCON: ') {
..........
}
Espero se comprenda :D
Se nota que era día lunes porque fui un poco enredada para explicar :$
Me quedó claro y además me funcionó :D ¡¡Muchas gracias!! ^_^
besos ronroneados
Obviamente, la imagen reflejada es más grande que la imagen original. Del resto, nada puedeo decir.
Tu perfil es inaccesible, no se qué blog tienes, no muestras un ejemplo donde pueda verse.
Aún, no soy adivino.
De nada.
Gracias man me sirvio!!!!!!
saludos
¿Quiere dejar un comentario?
recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...
Nota: sólo los miembros de este blog pueden publicar comentarios.
Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.
Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...