CSS  »  Articoli  »  Effetti con CSS 

Alice.js è una micro libreria JavaScript realizzata da Laurent Hasson e Jim Ing per la produzione di effetti visivi di impatto, risulta molto utile specie nella realizzazione di interfacce utente ricche di interazione.

Alice.js permette di compilare codice CSS per creare rapidamente animazioni CSS3 complesse, inoltre supporta l'accelerazione hardware nei moderni browser. Il progetto viene distribuito sotto licenza Apache 2.0 e, a differenza di quanto accade per prodotti simili, non è dipendente da alcuna libreria esterna ma fondata esclusivamente su file Javascript in un'unica cartella, senza immagini, CSS o altre dipendenze.

La libreria è stata progettata in modo estremamente modulare, per poterla utilizzare occorre includere il core ed i singoli moduli dedicati ai vari effetti. Alice.js non è legata alla gestione degli eventi (touch o mouse), n´ cerca di imporre una logica particolare o elementi di layout.

Grazie a queste caratteristiche è possibile integrarla in altre librerie, come ad esempio per animare un componente Dojo o jQuery, lavorando semplicemente sul rendering del componente applicando ad esso uno stile.

Nota: Alice.js al momento supporta solamente browser basati su Web Kit (es. Chrome e Safari)

Un esempio pratico: effetto 'Wobble'

<div id="DIV1">Esempio 1</div>
<img id="IMG1" src="/myimg.gif">

<script src="/alice/alice.core.js"></script> // include il core della libreria
<script src="/alice/alice.wobble.js"></script> // include lo script per l'animazione

/* Applica lo stile wobble */
<script>
    alice.wobble(["DIV1", "IMG1"], 20, 5, "top-left", 1000, 10, "ease-in-out", -1);
</script>

Abbiamo utilizzato l'effetto Wobble su un div e un'immagine, senza modificare il markup del layout, semplicemente lanciando la funzione wobble con i parametri:

Parametro	Descrizione
["DIV1", "IMG1"]	Array JSON di oggetti a cui apporre l'animazione
"20"	L'angolo di rotazione in gradi
"5"	Valore di casualità (in percentuale) della rotazione (in realtà, la rotazione sarà tra 19 e 21 (circa il 5%)
"top-left"	anchor point dell'animazione (consentiti: "top-left", "top-center", "top-right", "center" oppure direttamente le coordinate x, y)
"1000"	Durata effetto animazione in millisecondi
"10"	Valore di casualità (in percentuale) applicato alla durata (in realtà, la durata sarà tra 900 e 1100 (circa il 10%)
"ease-in-out"	funzione di andamento dell'animazione (in rapporto standard specifiche CSS)
"-1"	Il numero di iterazioni, (-1 per infinito)

Bounce

L'effetto "bounce" simula il rimbalzo di un oggetto sullo schermo visto dall'alto, creando anche un'ombra di rilievo

alice.bounce({ id: "my_image" // oggetto a cui applicare l'effetto 
             }); 

Toss

L'effetto "toss" simula il movimento del lancio di un frisbee. Tra le proprietà possiamo impostare la durata, il numero di iterazioni e la direzione di ritorno:

alice.toss({ id: "my_image",
             duration: 2000, 
			 iteration: 'infinite'
		   });

Spring

L'animazione "spring" mostra l'effetto elasticità di una molla in caduta, rimbalzando sullo schermo come una pallina. È possibile agire sulla configurazione di questo effetto per impostare un numero maggiore o minore di elasticità regolando il numero di rimbalzi:

alice.spring({ id: "my_image",
               width: 96,
			   height: 96,
			   drop_height: 190, // altezza della caduta 
			   elasticity: 0.56, // valore elasticità
			   iteration: 'infinite'
			 });

Fade

L'effetto "fade" crea un effetto di dissolvenza sull'elemento specifico. Il valore della proprietà duration determina il tempo impiegato dall'oggetto nell'abbandonare la visuale:

alice.fade2({ id: "my_fade", 
              duration: 3.0,
			  iteration: 'infinite'
			});

Rotate

L'effetto "rotate" esegue la rotazione di un div cui applicato. Impostando il valore di alcuni parametri è possibile simulare il movimento di un pendolo:

alice.rotate("my_image", "45", 
             {
			   origin: "50% 0%",
			   timing: 1000,
			   iteration: 'infinite',
			   direction: 'alternate', // direzione effetto
			   easing: 'cubic-bezier(0.33333,0.6667,0.66667,1)' //valori rimbalzo 
			 });

Altri effetti

Molte altre sofisticate animazioni sono ancora in fase di sviluppo ma vale la pena elencare le più significative:

Animazione	Descrizione
carousel	permette di visualizzare un numero da 2 a 30 div su pannelli adiacenti, sino a formare un poligono in prospettiva, creando una image-gallery di forte impatto visivo
cube	con i div selezionati crea un cubo che può essere ruotato al click del mouse o da tastiera
page flip	simula l'effetto di sfogliare le pagine di un libro
fold	effetto fisarmonica
flip	visualizza una successione di immagini in sequenza

Conclusioni

Alice.js è un progetto in forte crescita, supportato da un team di esperti che ha realizzato un lavoro degno di nota. Creare sofisticate animazioni senza implementare logiche già esistenti, permette di integrare questa libreria in qualsiasi progetto.

Link utili

• Laurent Hasson, autore di Alice.js
• Jim Ing , autore di Alice.js

Altri articoli

Altre guide

Altre newsletter