Micaela 28 de abril de 2009 a las 08.58
   Imprimir artículo
elWebmaster.com

Increíble efecto hover con jQuery


hoverEn este breve tutorial aprenderás cómo hacer un efecto hover increíble en pocos pasos, porque no todo lo bueno tiene que costar un gran esfuerzo.

Para lograr el efecto s√≥lo es necesario un poco de CSS y algo de jQuery. La idea es armar una galer√≠a de im√°genes con 9 thumbnails. Al posar el mouse o rat√≥n sobre cualquiera de los thumbnails, √©ste se agrandar√° creando un efecto √≥ptimo de acercamiento. Echa un vistazo…

Construye las bases (XHTML)

Nuestro markup ser√° muy sencillo, se tratar√° simplemente de una lista desordenada de tres columnas.

<ul class="thumb">
<li><a href="#"><img src="thumb1.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb2.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb3.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb4.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb5.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb6.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb7.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb8.jpg" alt="" /></a></li>
<li><a href="#"><img src="thumb9.jpg" alt="" /></a></li>
</ul>

Dise√Īa la apariencia (CSS)

Es fundamental que le prestes atenci√≥n a las propiedades de posicionamiento entre los √≠tems de la lista y la imagen. Es necesario asegurarse de que la imagen “hovered” se encuentre sobre las otras im√°genes, por lo que esta parte es clave.

ul.thumb {
float: left;
list-style: none;
margin: 0; padding: 10px;
width: 360px;
}
ul.thumb li {
margin: 0; padding: 5px;
float: left;
position: relative; /* Aquí ponemos posicionamiento absoluta */
width: 110px;
height: 110px;
}
ul.thumb li img {
width: 100px; height: 100px; /* Aqu√≠ va el tama√Īo del thumbnail peque√Īo */
-ms-interpolation-mode: bicubic; /* Arreglo para IE para escalar de forma c√ļbica */
border: 1px solid #ddd;
padding: 5px;
background: #f0f0f0;
position: absolute;
left: 0; top: 0;
}
ul.thumb li img.hover {
background:url(thumb_bg.png) no-repeat center center; /* La imagen que usamos de fondo en el efecto hover*/
border: none; /* Quitamos el border cuando estamos en hover */
}

Dale vida (jQuery)

B√°sicamente todo lo que estamos haciendo es animar el tama√Īo del thumbnail, posicionando absolutamente las coordenadas y haciendo padding al pasar el mouse por encima. Durante esta animaci√≥n, tambi√©n cambiamos el valor del z-index, para que la imagen seleccionada se mantenga sobre las dem√°s.

$("ul.thumb li").hover(function() {
$(this).css({'z-index' : '10'}); /*Agregamos un valor de z-index mayor para que la imagen se mantenga arriba */
$(this).find('img').addClass("hover").stop() /* Le agregamos la clase "hover" */
.animate({
marginTop: '-110px', /* Las siguientes 4 líneas alinearán verticalmente la imagen */
marginLeft: '-110px',
top: '50%',
left: '50%',
width: '174px', /* Aquí va la nueva medida para el ancho */
height: '174px', /* Aquí va la nueva medida para el alto */
padding: '20px'
}, 200); /* Este valor de "200" es la velocidad de cu√°n r√°pido/lento se anima este hover */

} , function() {
$(this).css({'z-index' : '0'}); /* Volvemos a poner el z-index nuevamente a 0 */
$(this).find('img').removeClass("hover").stop() /* Quitamos la clase "hover" y detenemos la animación*/
.animate({
marginTop: '0', /* Volvemos a poner el valor de alineación como el default */
marginLeft: '0',
top: '0',
left: '0',
width: '100px', /* Volvemos el valor de ancho como al inicio */
height: '100px', /* Volvemos el valor de ancho como al inicio */
padding: '5px'
}, 400);
});

No será tan eficiente como la versión Flash pero es un efecto bastante genial. Y si cambias las coordenadas del posicionamiento absoluto podrás crear varias formas distintas de que el efecto hoover aparezca. ¡Pon a prueba tu creatividad!

Haz clic aqu√≠ para ver c√≥mo funciona en vivo ¬Ľ

Fuente: Soh Tanaka


Enviar a Del.icio.us Enviar a Meneame Enviar a Digg Enviar a Fresqui Enviar a Enchilame

Comentarios (11)

  1. desendoll dice:

    Incre√≠ble, incre√≠ble… la verdad no se, a mi me parece bastante cutre e innecesario de hacer-lo tan complicado para hacer ese efecto.

  2. Juan Carlos Figueroa dice:

    hola amigos de el webmaster.com tengo tiempo siguiendo este sitio me encanta todo lo que publican
    y en especial todos estos articulos como estos ejemplos de javascript los cuales les dan mucha vista alas paginas ya que como quien dice estos efectos son los que llaman la atencion de la web 2.0 y son los que jalan al usuario a usar la pagina web o la aplicaion web.

    yo soy estudiante de sistemas informaticos osea veo todo esto de programacion orientada a objetos dise√Īo web y aplicaciones de escritorio y paginas web dinamicas y yo me centro mucho en la programacion pero en el dise√Īo no tanto y estoy queriendo aprender mas acerca de javascript con esto me acerco un poco mas ami objetivo muchas gracias, y felicitaciones por su sitio web sigan asi.

    atte
    juan carlos figueroa rubiano
    Seguidor de esta pagina

  3. Albert dice:

    C√≥digo tan corto pero quedo tan bonito, felicidades ūüėÄ

  4. miMovilandia dice:

    Muy interesante, gracias por compartirlo.

    Saludos.

  5. rapcylix dice:

    Oye genial efecto manejas muy bien esta libreria

  6. Pedritox dice:

    ;D este fue el tutorial que utolize para mi web:
    http://pmk.66ghz.com, hace tiempo ya ;D
    Cheken La Seccion De Trabajos y Se Daran Cuenta!
    Pero Yo Hize Un Deslizamiento Perfecto ;D!

    Gracias!

  7. Gisela dice:

    Hola

    soy nueva en esto, estoy inentando hacer unagaleria de 1×3 y otra de 2×2 con imagenespeque√Īas de 260×190 y grandes de 390×275 pero no se como modificar el codigo, me podrian orientar. Gracias. saludos muy buena p√°gina.

  8. Janux dice:

    Hola, muy buen efecto, lo he implementado en algunas de las paginas que hago.
    Muchas Gracias por compartir información.

    Saludos.

  9. √ďscar dice:

    Como podría enlazar a un vídeo embebido en vez de a una imagen??? Es algo urgente, Gracias!!!

  10. sandra dice:

    No has dicho que plugin es necesario descargarse.

  11. Javier Velasquez dice:

    es un muy buen jquery y muy moldeable, yo lo use en uno de mis proyectos

Deja tu opinión

© 2007 - 2008 elWebmaster.com | Powered by Wordpress | Diseño CSS y XHTML válido. | Algunos íconos basados en FamFamFam Mini
Acceder