Ti ricordi quando dicevo che tra flash e javascript il vincitore era javascript?
Neanche farlo apposta, pochi giorni dopo il mio articolo è uscito Spritely, un incredibile plugin per animare sfondi e oggetti, con solo javascript e html.
Il plugin funziona su tutti i browser (e quando dico tutti, intendo anche IE6..); l’unico accorgimento è quello di utilizzare un plugin per gestire le trasparenze, dato che Internet Explorer 6 non le supporta. Inoltre è supportato da iPhone, iPod Touch e iPad.
L’utilizzo è di una semplicità disarmante e nella pagina gallery puoi vedere anche alcuni siti che hanno già utilizzato spritely.
Ed ecco un semplice tutorial che sfrutta questo plugin.
Prima di iniziare scarica i file necessari per realizzare il tutorial.
Passo 1. Inizializzazione dello script
Tra i tag head, inserisci il codice necessario per inizializzare lo script
Passo 2. Inserimento dei div necessari
Ora dobbiamo inserire il div che farà da sfondo, cioè le nuvole e i div di primo piano dove metteremo i grattacieli e la scritta.
Passo 3. Applichiamo gli stili
Applichiamo gli stili necessari. Importante la proprietà position per quanto riguarda il div text, senza il quale lo script non funziona. Per ulteriori informazioni sulla proprietà position ti invito a leggere l’articolo di Your Inspiration Web.
#background {
margin:auto;
width: 798px;
height: 400px;
background: transparent url(sfondo.jpg) ;
border: 1px #3f00f4 solid;
}
#skyline {
margin-top:192px;
margin-left:0px;
}
#text {
position:absolute;
}
Passo 4. Animamo la scritta e lo sfondo
Ora dobbiamo far muovere le nuvole e la scritta, semplicemente inserendo questo codice, sempre tra i tag head.
(function($) {
window.app = {
init: function() {
//inserisco i metodi da applicare a background e text
$('#background').pan({fps: 30, speed: 2, dir: 'left'});
//fps:frame al secondo, speed:velocità e dir:direzione
$('#text')
.spRandom({
//delimito l'area di movimento della scritta
top: 100, left: 100, right: 800, bottom: 400,
//velocità e tempo di pausa (ms)
speed: 3500,
pause: 1000
});
}
};
$(document).ready(function() {
window.app.init();
});
})(jQuery);
Semplice vero? Per qualunque dubbio o curiosità chiedi pure nei commenti.
Scarica il sorgente
Guarda l’esempio
Vale on 
Elena on 
Mirko D'Isidoro on 
Rosario on 
Tamal on 
federica on 
16 marzo 2010 at 16:40
Pazzesco
16 marzo 2010 at 18:30
Che meraviglia! Devo provarlo al più presto!
Grazie per averlo condiviso
17 marzo 2010 at 12:02
Grande Fede. Grazie anche da parte mia per la condivisione di tutte e non solo questa news.
17 marzo 2010 at 17:54
Scusate l’ignoranza.
Il passo 3: Applichiamo gli stili, dove lo devo inserire? Ho letto l’articolo su YIW ma non mi è chiaro.
Grazie
17 marzo 2010 at 18:01
Ops … risolto.
L’assessore Cangini avrebbe detto … mo scèi invornito…
17 marzo 2010 at 23:58
@Ennio: jquery non smetterà mai di stupirmi!
@Manuela: benvenuta nel blog
per qualunque dubbio sono a disposizione!
@Giovanni: bene sono contento che hai combinato. Se c’è qualche altro dubbio non esitare a chiedere! ciao!
6 giugno 2010 at 15:17
Ho letto il tuo bellissimo articolo alla pagina http://www.fedeweb.net/2010/03/15/tutorial-javascript-animazioni-flash-con-jquery/
e ti rigrazio tantissimo per le spiegazioni.
Ho provato a riprodurle facendo variazioni sul tema.
Cambiando immagini e cercando di modificare i movimenti.
Tutto funziona perfettamente solo che in alto a sinistra delle immagini mi viene la x di immagina mancante.
Eppure le immagini ci sono e si vedono si vedono ed i percorsi vanno bene (ho controllato più volte).
Da cosa dipendono quei sengnali i collegamento interroto?
Grazie
Sandra
8 giugno 2010 at 10:41
Ciao Sandra e benvenuta nel blog
Prova a mandarmi il sorgente via mail che provo a dargli un’occhiata ok? Così su due piedi non saprei come aiutarti..
20 giugno 2010 at 15:28
Ciao, grazie dello script, non riesco a vederlo anche su iphone, forse va a cozzare con altri script ma, è molto bello. Grazie.
21 giugno 2010 at 14:20
Ciao Nadia, come ti dicevo sui cellulari o smartphone non si riescono a vedere gli effetti javascript.
22 giugno 2010 at 10:55
Scusa se ti contraddico ma il tuo plugin lo vedo eccome (su nokia n96), non so su alti cell ma se pensi che è uno script basato su java e con lo scrip java si fanno e si vedono i giochi, e i games li visualizzano moltissimi cell ormai, vedo bene anche gli esempi in gallery… ma il mio lavoro no, solo su pc, non capisco cosa sbaglio, sto’ facendo prove su prove ma… mmhmm è dura, speriamo bene. Buona giornata Federico, grazie ciao()
22 giugno 2010 at 11:43
Ma scusa non lo scrcivi proprio tu che questo plugin è supportato anche da iphone, ipod etc ? Anche su Spitely lo affermano ed in effetti è cosi. Dimmelo tu dove sbaglio 6 tu il maestro! Certo come no hmm, se prima ti stavo poco simpatica ora….
No problem nn amo le mezze misure. XD ()
23 giugno 2010 at 10:08
Ciao Nadia, si scusa hai ragione. Mi sono sbagliato. Sei riuscita a risolvere?
23 giugno 2010 at 10:49
No scherzi nessun problema. Non ho ancora capito ma ci sto lavorando, e sto studiando. Forse mi sbaglio ma penso sia un problema di imgs troppo pesanti e “larghe”. Anke xchè le voglio animare e c è il sistema senza inserire gifs. Devo ridurle e correggere la proprietà “position . Èh, sembra facile ma è un casn.. Fede ,XD. Ti faccio sapere ok. Grazie (), baci
24 giugno 2010 at 09:31
Ciao. Sono riuscita poi ad animare le imgs sai, ho capito, ho fatto il plugin di “spritely”, sono contenta ma devo ancora risolvere il problema tel. Ma NON mi arrendo *_<" Mai!
(se vai a vedere non prendere paura è tutto ancora da finire e definire).
UN BACIO CIAO ()
24 giugno 2010 at 09:40
Sbagliato url! Sono ancora addormentata XD =)
http://beatles-planet.blogspot.com
25 giugno 2010 at 14:00
Dopo ti inserisco imgs (avatars) nella pag ‘esatta’. Si ke sn mie, è la mia passione. Sn via nn posso ora. Come stai?
Ciao *()