Fw

Wordpress Creative Developer

Tutorial Javascript – Animazioni Flash Con jQuery

  • Tutorial 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.

Tutorial Javascript Animazioni

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.

Tutorial Javascript Animazioni in Flash

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

%MINIFYHTML23e6bbd36ce4e1adfde0fd01eee321255%%MINIFYHTML23e6bbd36ce4e1adfde0fd01eee321256%

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.

I Love NY
NY Skyline

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

18 commenti

  1. Che meraviglia! Devo provarlo al più presto!
    Grazie per averlo condiviso :)

  2. Grande Fede. Grazie anche da parte mia per la condivisione di tutte e non solo questa news.

  3. Scusate l’ignoranza.
    Il passo 3: Applichiamo gli stili, dove lo devo inserire? Ho letto l’articolo su YIW ma non mi è chiaro.
    Grazie

  4. Ops … risolto.
    L’assessore Cangini avrebbe detto … mo scèi invornito… :-)

  5. @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. 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

  7. 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..

  8. Ciao, grazie dello script, non riesco a vederlo anche su iphone, forse va a cozzare con altri script ma, è molto bello. Grazie.

  9. Ciao Nadia, come ti dicevo sui cellulari o smartphone non si riescono a vedere gli effetti javascript.

  10. 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()

  11. 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 ()

  12. Ciao Nadia, si scusa hai ragione. Mi sono sbagliato. Sei riuscita a risolvere?

  13. 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

  14. 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 ()

  15. Sbagliato url! Sono ancora addormentata XD =)
    http://beatles-planet.blogspot.com

  16. Dopo ti inserisco imgs (avatars) nella pag ‘esatta’. Si ke sn mie, è la mia passione. Sn via nn posso ora. Come stai?

    Ciao *()

  17. There should be some technique to entirely stop all these spam web pages
    that I keep finding. I’m sick and tired of it. I keep thinking “oh, finally! a site with my exact term”…. but it’s just
    a website filled with ads and ads.

Scrivi un commento

L'indirizzo email non verrà pubblicato. I campi obbligatori sono contrassegnati *