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

Ti è piaciuto l'articolo? Se non vuoi rischiare di perderti i prossimi articoli tieniti aggiornato con i feed RSS o seguimi su twitter e facebook!

Se non sai cosa sono, guarda questo video Ora non sai come abbonarti? Guarda questo video

Inoltre potrai seguirmi su twitter, facebook o friendfeed!

Articoli simili che potrebbero interessarti

Tutorial Jquery: Gestire Grandi Menu Drop Down Con Css e Jquery

A volte può capitare di dover realizzare siti costituiti da molte pagine, con la conseguente difficoltà nel realizzare un menu di navigazione...

Tutorial Jquery: Creare Un Menu Elastico Con Delle Immagini

Dopo tanto tempo su Fedeweb ritornano i tutorial su jquery, dove in passato abbiamo visto come realizzare degli slideshow di immagini, realizzare...

Effetto hover animato con jquery

Oggi vediamo come creare un effetto hover animato, sfruttando jquery, di cui è stata già vista un'applicazione qualche settimana fa. Ecco un esempio...