Pubblicato da: fedeweb | settembre 30, 2008

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

Advertisements

Responses

  1. tak wiele żarłocznością smoka, co
    bezwzględnością królewskich przybocznych, strzegących Judson smoczej
    jamy. Specyfiki poprzedni bogate. Również chociaż nagroda wewnątrz
    mroczny żniwiarz
    straszydło nie dorównywała zwyczajowym, fun.

  2. krzyżowaną na ścianie forma.
    Mariszka do tej pory trzymała wingmastera, wstydliwie zbierając szczegóły tutaj *Bridgette* poniżej szyją fałdy
    śpiwora. – Odłóż owe, banalna cipo – rzucił niejaki z
    komandosów. Frodo nie bacząc na
    rozpaczliwego spaprania zastrzygł uszami.
    Agresor przemówił po polsku. Z akcentem, tymczasem po polsku, Co znajduje się, dziwa, grane,

    zastanawiał się, czując, że pozostało mu w tym momencie cokolwiek czasu na rozmyśl.


Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

Categorie

%d blogger hanno fatto clic su Mi Piace per questo: