Animare le immagini di sfondo con javascript

In questo articolo vedremo una delle innumerevoli applicazioni della libreria jquery, l’animazione delle immagini di sfondo nei menu.

L’esempio è più chiaro di qualunque altra parola..

Andiamo a vedere insieme come realizzare questi effetti.

1) Scaricate jquery e il plugin backgroundposition.

2) L’html

Scrivete il codice html necessario per realizzare un menu, come questo:

<ul id=”nav”>
<li><a href=”#”>Home</a></li>
<li><a href=”#”>About</a></li>
<li><a href=”#”>Contact</a></li>
</ul>

3) Il CSS

Regolate l’aspetto del menu tramite il Css, come nel codice qui sotto

ul {
list-style:none;
margin:0;
padding:0;
}
li {
float:left;
width:100px;
margin:0;
padding:0;
text-align:center;
}
li a {
display:block;
padding:5px 10px;
height:100%;
color:#FFF;
text-decoration:none;
border-right:1px solid #FFF;
}
li a {
background:url(bg.jpg) repeat 0 0;
}
li a:hover {
background-position:50px 0;
}

4) Le immagini

Potrete avere differenti tipi di effetti creando la tua immagine come preferisci

Ecco 2 esempi di immagini, che permettono di ottenere il secondo e il terzo effetto presenti nell’esempio.

Con la prima immagine si ottiene un’animazione particolare di riempimento con il blu .

Con la seconda immagine si ha un’animazione con un effetto fade, andando ad utilizzare un gradiente.

5) Lo script

Ecco lo script che permette di ottenere gli effetti visti negli esempi.

$(‘#nav a’)
.css( {backgroundPosition: “0 0″} )
.mouseover(function(){
$(this).stop().animate(
{backgroundPosition:”(0 -250px)”},
{duration:500})
})
.mouseout(function(){
$(this).stop().animate(
{backgroundPosition:”(0 0)”},
{duration:500})
})

La prima istruzione è necessaria per fare in modo che la visualizzazione sia corretta sia su internet explorer che su firefox 2.

Gli elementi sono animati utilizzando gli eventi onMouseOver e onMouseOut.

Scarica il sorgente

Vai all’esempio

Fonte: Snook