Fw

Wordpress Creative Developer

Animare le immagini di sfondo con javascript

  • Plugin jQuery
  • -

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

15 Commenti

  1. Salve. Sono davvero ammirata per l articolo, davvero bello e scritto bene. Complimenti al webmaster per la grande cognizione in materia, (e per l umiltà e cortesia). Bhè, anke se detto da me che son alle prime armi in materia, non so quanto possa valere ma, accettatelo comunque. Grazie della gentilezza, mi sono iscritta a newsletters &”feeds. Ciao, Baci. (Io sono in wap da anni: http://beatlestoons.peperonity.com anche x questo.. Ma studierò.)

  2. Ciao Nadia e benvenuta nel blog 😉

    Che piacere che mi ha fatto questo commento! ti ringrazio per le belle parole e se hai dei dubbi sono qui!

  3. Rieccomi! Spero di non disturbare ma, ho provato ad inserire il menu cn script jquery e ci sarei pure riuscita ma nn si visualizza sul telefono come invece riesco qui. Mannaggiaa..ma perchè? Cosa devo fare?? Devo inserire una stringa di codice in ..? Mhmm help! Scusi l ignoranza sono un disastro ma adoro il javascript e jquery, mi aiuti la prego. Grazie .

  4. Non avevo letto il msg. Ma che gentile.. Graziee! Il piacere è tutto mio. Davvero ()

  5. P.S. A prescindere dall’aiuto, se e quando ci sarà sarà ben accetto, e la ringrazio anticipatamente, ma non si faccia alcun problema, se e quando avrà tempo.. ok. Io la ringrazio della grande professionalità e gentilezza. Di cuore. Non capita tanto spesso. Le è bravissimo! Penso lo sappia. Complimenti ancora. Baci ()

  6. Dammi del tu! comunque è normale che sul cellulare l’effetto non si riesca a vedere, tranquilla!

  7. si infatti immaginavo “da ignorante qual sn ma me l ero prefissato e questo mi bloccava. Ma ora posso iniziare basta giocare. Sai, ok dv rifare imgs inserire links, rifare il sito anzi iniziare a farlo ma ci son riuscita, ho fatto il menu circ. Di porfolio, scusa sn stanca. Niente di ke ma nn credo sia tn facile. Nn mi arrendo mai bleffavo sai. Anzi scusami del msg stupido di ieri a volte sn davvero una cretina. Ti auguro una buona giornata, serata ormai. 6 sempre gentile grazie. Un bacio. Nadia

  8. Ok! sei hai bisogno chiedi pure! 😉 ciao!

  9. Ciao, grazie sempre gentile lei eh, tu. Mhmm sarà difficile, l altro giorno è stata la prima volta ke ho chiesto aiuto, nn ke ci sia nulla di male ma nn mi appartiene mettiamola così, nn è nel mio stile, ki mi conosce lo sa. Io amo le sfide e farcela da sola. Nn so perchè cn te.. mi devi esser molto simpatico io nn ho mai scritto tanto! Eheh Nn amo chattare, il mio new ? sito nn lo vedrà nex. Anke se ho molti amici ke trascuro purtroppo, ank x mancanza di tempo. Mi dovrei risvegliare dal letargo ke dici tu? Mi ci vorrebbe un principe ma nn c è.. Eheh skerzo. Ma se tu mi vuoi lasciare un msg mi fa molto piacere. È più forte di me cosa vuoi.. e sn qui dal 2004, curioso eh! Buona notte Federico. Non lavori troppo mi raccomando. Bacio8 *.~ne

  10. Ho visto il tutorial sl avatars, belloo! 6 bravissimo ! Non mi sembrava carino lasciare un msg la ma domani ti lascio un paio di mie img, io gli avatar li faccio in adobe photoshop. Forse in qs me la cavo. Mi dirai. Ciao ()

  11. Spero mi venga.. sono negata in ste cose e in ritardissssimo scusa. E’ solo un esempio, spero ti piacciano. MwA =)

  12. Ok no problem scusa il disturbo. Even if i don’t think you are right. Bye . Take care

  13. Brava Nadia! li hai realizzati tu i lavori? comunque è meglio se commenti nell’articolo dove si parla di avatar. Ciao!

  14. Ciao, stavo provando a srtutturare un piccolo menu di prova come descritto nel tuo articolo. Non macino troppo di javascript e il problema credo sia proprio lì.
    Cosa c’è che non va?
    Qui la pagina di prova… http://www.mariosa.it/test_menu/test_menu.htm

    grazieeeeeeeeee

Scrivi un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *