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.
Fonte: Snook
E non dimenticarti di restare aggiornato abbonandoti gratis ai feed RSS.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
Ciao, mi chiamo Federico Pian e lo scopo di questo blog è condividere con te la mia passione per la grafica e il web design.
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ò.)
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!
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 .
Non avevo letto il msg. Ma che gentile.. Graziee! Il piacere è tutto mio. Davvero ()
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 ()
Dammi del tu! comunque è normale che sul cellulare l’effetto non si riesca a vedere, tranquilla!
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
Ok! sei hai bisogno chiedi pure!
ciao!
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
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 ()
Spero mi venga.. sono negata in ste cose e in ritardissssimo scusa. E’ solo un esempio, spero ti piacciano. MwA =)
Lo sapevo..ke imbranata! scusa =) ciao Bacio =)
http://s6.imagestime.com/out.php/i475677_bookface2avatar.gif
http://s6.imagestime.com/out.php/i475678_JOHNAVATAR2010.gif
http://s6.imagestime.com/out.php/i475679_INTERCHAMPIONSLEAGUE2010.gif
Ok no problem scusa il disturbo. Even if i don’t think you are right. Bye . Take care
Brava Nadia! li hai realizzati tu i lavori? comunque è meglio se commenti nell’articolo dove si parla di avatar. Ciao!