NOTA BENE: Il Bloggatore ha rilevato dei problemi di collegamento con il blog indicato come fonte originale dell'articolo. Pertanto, al fine di consentire agli utenti di leggere questo articolo, se possibile, viene reso temporaneamente disponibile il post completo.
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
- Articolo precedente: Individuare e cancellare i file duplicati nel proprio PC, con CloneSpy
- Articolo successivo: Case macache
SEGNALA / INVIA QUESTO POST:
Hai trovato questo articolo interessante? Iscriviti GRATIS ai nostri feeds!
