JMiur [E]

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:
<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"


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:



<img src="URL_imagen" id="demoReflejo" onclick="Reflection.add(this, { height: 1/3, opacity: 2/3 });" />
<a href="javascript:Reflection.remove(document.getElementById('demoReflejo'))">remover el efecto</a>

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()" />

11 comentarios:

Gem@  

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 ;)

Responder
Asuknamun  

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/

Responder
Monoblock  

Muy bueno, siempre entro para ver las novedades y si hay alguna utilidad para mi blog, te felicito por lo que haces.

Ahora tengo una duda con esta utilidad, Habra alguna forma de que los textos debajo de la imagen queden encima del reflejo...¿?

Espero puedas responerme esto.

Responder
LuzdeLuna  

!Qué buen efecto! ;) otra cosita para practicar!! :D

Responder
Σ=o) Pau  

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

Responder
JMiur  

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

Responder
Σ=o) Pau  

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

Responder
Monoblock  

Esta bueno el efecto pero sigue teniendo un inconveniente, el texto que pongo debajo cuando hace el efecto reflejo lo desplaza hacia abajo :(

Responder
Monoblock  

Bueno gracias por nada.

Responder
JMiur  

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.

Responder
Martín  

Gracias man me sirvio!!!!!!


saludos

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

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 ...

 
CERRAR