JMiur [E]

Muchos utilizan jQuery y para ellos, New2WP muestra una forma simple de crear efectos de distino tipo; este, en particular, permite deslizar imagenes de tal modo que superponemos dos y cuando ponemos el cursor encima, se muestra la otra; es decir un efecto hover pero animado:

El script en si mismo es corto, agregamos jQuery antes de </head>:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js' type='text/javascript'/>
Y debajo, la función:
<script type='text/javascript'>
//<![CDATA[
$(function() {
  $('.animar').hover(function() {
    $(this).children('.front').stop().animate({ "top" : "150px"}, 700);
  }, function() {
    $(this).children('.front').stop().animate({ "top" : "0px"}, 200);
  });
});
//]]>
</script>
Por último, un poco de CSS:
<stye>
.animar {
  cursor: pointer;
  height: 150px;
  overflow: hidden;
  position: relative;
  top: 0;
  width: 200px;
}
.animar img {
  height: 150px;
  left: 0;
  position: absolute;
  top: 0;
  width: 200px;
}
</stye>
Lo usaremos de este modo:
<div class="animar">
  <img src="URL_SEGUNDA_IMAGEN" />
  <img src="URL_PRIMERA_IMAGEN" class="front" />
</div>
Todo lo que debemos hacer es colocar dos imágenes dentro de un DIV con la clase animar y adentro, dos imágenes; la segunda de ellas tendrá la clase front y es la que se verá por defecto; como están posicionadas de forma absoluta, están superpuestas y la segunda, tapa la primera.

El tamaño de las imágenes del ejemplo es de 200x150 y el script buscará la imagen con la clase front y cambiará el valor de la propiedad top de tal forma que se "mueva" hacia abajo tanto como el alto de la imagen misma y de esa forma, se verá la otra que está debajo animando ese desplazamiento con una cierta velocidad (700 en este caso):
$(this).children('.front').stop().animate({ "top" : "150px"}, 700); // baja 150 pixeles
Al sacar el cursor de encima se restaura la posición a cero pero más rápidamente (200):
$(this).children('.front').stop().animate({ "top" : "0px"}, 200);
Lo mismo puede hacerse en cualquier dirección; esto desplaza la imagen hacia arriba:
$(this).children('.front').stop().animate({ "top" : "-150px"}, 700);  // sube 150 pixeles
Y estas dos, desplazarían la imagen horizontalmente ya que en lugar de top, usamos left:
// hacia la derecha:
$(this).children('.front').stop().animate({ "left" : "200px"}, 700);  // se mueve 200 pixeles a la derecha (valores positivos)
...
$(this).children('.front').stop().animate({ "left" : "0px"}, 200); });

// hacia la izquierda:
$(this).children('.front').stop().animate({ "left" : "-200px"}, 700);  // se mueve 200 pixeles a la izquierda (valores negativos)
...
$(this).children('.front').stop().animate({ "left" : "0px"}, 200); });

17 comentarios:

Winx Club Magix  

Perdon por la pregunta que no tiene que ver con el tema.
Ok, yo en mi blog http://winxclubmagix.blogspot.com/ tengo la plantilla 2006 Ms. Moto (Pinky Lee variation), ya tuneada a mi estilo, y quedó muy bonita, pero hy algo que me molesta, no responde para centrar imagenes, le doy clic en centrar y ya está activado pero al publicar queda de nuevo hacia la izquierda. Podrias ayudarme para que al seleccionar centrado quede centrado?

Responder
JMiur  

Pués en tu blog veo códigos diversos y en todas las imágenesveo que agregas la propeidad float ya sea right o left y eso, hará que nunca se centren.

No se qué editor utilizas o si escribes los códigos manualmente; si es así, esto centra una imagen:

<img style="display:block;margin:0 auto;" src="la_imagen">

En la plantilla, veo que también dice:

img {
border: 0 none;
display: block;
}

Y eso me parece erróneo ya que no todas las imágenes son bloques, por ejemplo si quiero poner un texto al lado de una asñi que eliminaría eso de display: block;

Responder
Unknown  

En cualquier momento hago el pase del año a JQuery :P

Precioso el efecto, veo veo, qué ves???

Responder
Luis Kasanova  

Muy bueno este efecto, gracias JMiur, es una buena manera para hacer una publicidad más elegante, por ejemplo, la primera imagen podría ser algo que llame la atención del cliente, y cuando pase la flecha se desplace y automáticamente aparezca más información del producto. Lo implementaré en mi blog.

Muchas gracias!

Responder
Arternativo  

hola! primero que nada quiero agradecerte por todos estos tutoriales que haces en tu blog. yo soy un novato y lo poquito que se lo he aprendido aquí.
tengo un problemita al acomodar mis animaciones es decir quedan en fila hacia abajo y no se como acomodarlas como en tu ejemplo

http://radiojohna.blogspot.com/p/contactanos.html

tampoco puedo centrarlas se quedan en el lado izquierdo
ojala pudieras ayudarme

Responder
JMiur  

Para eso, deberías colovar todo dentro de un DIV, darle una dimensión y, por ejemplo, centrarlo:

<div style="margin: 0pt auto; width: 400px;">
.......
.......
.......
.......
</div>

Responder
Arternativo  

@JMiur
con esto que me dices ya puede centralas ,sin embargo sigo sin poder acomodarlas como tu. por asi decirlo en un bloque de 4 imagenes.
me aparecen en fila hacia abajo.

Responder
JMiur  

Tres cosas. Primero, el DIV contenedor debe ser más anvcho porque si cada imagen mide 200 pixeles y el ancho del contendor tiene 250, no entran, tiene que ser de 400 como mínimo.

Segundo, agrégale la propeidad flaot a la clase animar:

.animar {
.......
float: left;
}

Por último elimina los saltos de línea entre los divs.

Responder
Arternativo  

De verdad te lo agradezco mucho.

Responder
Vero Rodriguez  

genial!! una pregunta hay alguna manera de que estas imagenes tengan un enlace a una pagina estatica o una entrada? Gracias!!

Responder
JMiur  

Puedes ver qué pasa si colocas un enlace; no lo he probado.

Responder
Despacho Jurídico  

Saludos Master este me salio muy bien en mi blog. Gracias

Responder
eipa0  

ando buscando algo paresido solo que la imagen salga de forma diagonal tanto dentro como fuera, hay una manera de realizar esto...?

Responder
JMiur  

animate() permite agregar varias propeidades separadas por comas así que debería modificar un par de ellas, por ejemplo, left y top

Fíjate en el API de jQuery para ver la sintaxis de eso.

Responder
eipa0  

¿como puedo juntar is Imagenes sin ese pequeño espasio las separa en en tu ejempo....?
nesesito que las 4 imagenes muy juntas

Responder
eipa0  

se pueden juntar las imagenes sin nesesidad de ese espasio....?

Responder
JMiur  

En este ejemplo en particular, eliminado el borde ya que eso es lo que las separa.

Responder

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

 
CERRAR