Ejemplo Caída de Imagen con Jquery

Que tal!

Vamos a ver como realizar un sencillo y llamativo efecto, que consiste en hacer “caer” una imagen y mostrar lo que está detrás de ella, sólo con colocar el cursos del mouse sobre la misma

El ejemplo pueden verlo en:

http://latindeveloper.net/jquery/ejemplos/caidaimagen/

Primero el creamos el documento HTML, en este caso html5


 Ejemplo Caida de Imagen Con Jquery
<script type="text/javascript" src="js/jquery.js"></script><script type="text/javascript" src="js/general.js"></script>
</pre>
<h1>Ejemplo de Efecto Jquery</h1>
<div>
<div class="contenedorImagen">
<div class="imagenSustituto">Más Información</div>
 <img src="images/1.jpg" alt="" /></div>
<div class="contenedorImagen">
<div class="imagenSustituto">Más Información</div>
 <img src="images/2.jpg" alt="" /></div>
<div class="contenedorImagen">
<div class="imagenSustituto">Más Información</div>
 <img src="images/3.jpg" alt="" /></div>
</div>
<pre>

En el HTML hacemos la referencia a la librería jquery, y nuestro archivo js llamado general, que es donde irá nuestro código javascript.

El html consiste en 3 div’s con la clase “contenedorImagen” dentro de cada uno de estos divs, se encuentran 2 elementos:

  • Un div con la clase “imagenSustituto”
  • Una imagen

Mediante la hoja de estilos “basico.css” le asignamos position relative al DIV contenedor (los div con la clase “contenedorImagen”) y a los elementos interiores, les damos position absoluta y los posicionamos en top : 0 y left : 0, de esta forma quedan en la misma posicion, la imagen queda sobre el DIV, ya que en el HTML lo ponemos después que la imagen.

Veamos el código de la hoja de estilo:


.contenedorImagen {
	position: relative;
	float: left;
	margin-left: 20px;
	width: 350px;
	height: 200px;
	overflow: hidden;

}

.contenedorImagen img{
	position: absolute;
	top: 0px;
	left: 0px;
}

.contenedorImagen .imagenSustituto{
	position: absolute;
	top: 0px;
	left: 0px;
	width: 320px;
	height: 200px;
	background-color: green;
	text-shadow: 2px 2px #ff0000;;
	color: Black;
}

Hasta ahora, nuestro trabajo muestra 3 imagenes, para crear el efecto, veamos lo que tenemos en el codigo javascript:

$( function(){
$('.contenedorImagen').hover( function(){
		$(this).children('img').stop().animate({top: "210px"}, 600);
	}, function(){
		$(this).children('img').stop().animate({top: "0px"}, 400);
	}
);
});

En el código javascript, hacemos lo siguiente:

Creamos un selector hacia los elementos que contengan la clase “contenedorImagen”, en nuestro caso son 3 divs, luego, definimos que cuando el usuario pase el mouse sobre el elemento “hover”, se ejecute un código $(this).children(‘img’).stop().animate({top: “210px”}, 600); y cuando el usuario deje de tener el mouse sobre el elemento, se ejecute esta función $(this).children(‘img’).stop().animate({top: “0px”}, 400);

La primera función selecciona a la imagen que queremos ocultar, y mediante el método animate, la mueve hacia abajo, 210px, en el trancurso de 600 milisegundos, de esta forma la imagen baja y se ve el div que tenemos atrás.

La segunda función lo que hace es lo contrario, es decir vuelve a dejar a la imagen en la posición correcta “0px” y la imagen vuelve a estar sobre el div

Para que el div se oculte totalmente, es importante la propiedad overflow: hidden; en el div contenedor, ya que si no fuera así, la imagen igual se mueve, pero no se oculta

Espero este pequeño tutorial les haya servido de ayuda, recuerden pueden ver el ejemplo aquí

El lugar donde aprendí a hacer esto, y en mi opinión, el mejor tutorial de jquery en la web es:

http://net.tutsplus.com/articles/web-roundups/jquery-for-absolute-beginners-video-series/

Visítenlo ( está en inglés)

About these ads

Deja un comentario

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

Seguir

Recibe cada nueva publicación en tu buzón de correo electrónico.

%d personas les gusta esto: