Tutorial Javascript – Animazioni Flash Con jQuery
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
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.
Pazzesco
Che meraviglia! Devo provarlo al più presto!
Grazie per averlo condiviso
Grande Fede. Grazie anche da parte mia per la condivisione di tutte e non solo questa news.
Scusate l’ignoranza.
Il passo 3: Applichiamo gli stili, dove lo devo inserire? Ho letto l’articolo su YIW ma non mi è chiaro.
Grazie
Ops … risolto.
L’assessore Cangini avrebbe detto … mo scèi invornito…
@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!
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
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..
Ciao, grazie dello script, non riesco a vederlo anche su iphone, forse va a cozzare con altri script ma, è molto bello. Grazie.
Ciao Nadia, come ti dicevo sui cellulari o smartphone non si riescono a vedere gli effetti javascript.
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()
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 ()
Ciao Nadia, si scusa hai ragione. Mi sono sbagliato. Sei riuscita a risolvere?
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
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 ()
Sbagliato url! Sono ancora addormentata XD =)
http://beatles-planet.blogspot.com
Dopo ti inserisco imgs (avatars) nella pag ‘esatta’. Si ke sn mie, è la mia passione. Sn via nn posso ora. Come stai?
Ciao *()