Lo que sique es una continuación del efecto "nudging", que vimos anteriormente. En este caso animaremos el fondo como solÃamos hacer en flash, con la ventaja de que ahora ganamos un poco en accesibilidad.
Ej. 1: animación vertical
HTML
Partimos de una simple lista desordenada, a cuyo elemento padre (ul) hemos otorgado la regla «nav».
CSS
Los elementos de la navegación (li) flotan a la izquierda y se les ha dado un alto de lÃnea equivalente al de la parte de la imagen a mostrar, para poder centrar el texto. Cada enlace se muestra en bloque.
Hay que destacar que el estado hover ha sido declarado, por lo que los usuarios que no tengan activado javascript en su navegador, podrán ver al menos la posición final.
Se ha establecido una posición inicial para este fondo, de forma que funcione en los navegadores que no establecen una posición de forma predeterminada.
Imagen
Se pueden conseguir diferentes efectos variando el formato y el movimiento de la imagen. En este caso se desplazará hacia arriba hasta mostrar la banda decorativa que está en la parte inferior y que servirá además de marcador. Esta configuración se repetira también para el elemento activo.
Fig. 1: Imagen de Fondo
El antes y el después para la imagen de la Fig. 1, se consigue con un desplazamiento vertical de 79 pixeles, lo que corresponde a la mitad de su altura. De manera predeterminada en la hoja de estilos, la banda inferior permanecerá oculta hasta que el usuario pase el ratón sobre el enlace.
Script
Finalmente, el script es muy simple: la imagen del fondo debe moverse cuando el usuario pasa el ratón por encima, variando su posición. Los eventos implicados son «mouseover» y «mouseout».
Hay que destacar en esta función que cada animación es detenida antes de su comienzo, y con esto se evitan comportamientos inapropiados o repeticiones innecesarias que se producen cuando el ratón pasa repetidas veces por un enlace. jQuery también tiene un método .hover que puede ser utilizado para simplificar el script.
Por último, hay que recordar que es necesario, además de la propia librerÃa jquery, el plugin Background-Position que permite estos movimientos de la imagen de fondo. Ambos ficheros deben ser enlazados de la manera habitual en la cabecera del documento.
Ver Código (+/-)
HTML
<ul id="nav"> <li><a href="#">Inicio</a></li> <li><a href="#">Servicios</a></li> <li><a href="#">Productos</a></li> <li><a href="#">Contactar</a></li> </ul>
CSS
/*
--- Animación de Imagen de Fondo en Menu ---
*/
#animar_fondo ul {
list-style:none;
margin:0;
padding:0;
height:79px;
}
#animar_fondo li {
float:left;
width:153px;
height:79px;
margin:0;
padding:0;
text-align:center;
line-height:79px;
}
#animar_fondo li a {
display:block;
color:#d4b596;
text-decoration:none;
}
#animar_fondo li a {
background-image: url(../imagenes/animar_fondo/menu_fondo.jpg);
background-repeat: repeat;
background-position: 0 0;
}
#animar_fondo li a:hover {
background-position:0px -79px;
}
JQuery
/*
--- Animación de Imagen de Fondo en Menu
*/
$(function(){
$('#nav a')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 -79px)"}, {duration:500})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:200, complete:function(){
$(this).css({backgroundPosition: "0 0"})
}})
})
});
La referencia para esta práctica la he tomado del blog de Jonathan Snook aquÃ. Espero que hayas disfrutado del tutorial y que te haya sido de utiliad. Que tengas un buen dÃa.