Quick demo

In attesa di ciò che porterà HTML5, non limitatamente al tag canvas, è importante ricordare che tanti effetti grafici possono essere ottenuti, allo stato dell’arte, grazie ai soliti framework come MooTools, jQuery e, magari, qualche trucco con i CSS.

Una delle caratteristiche più utilizzate con tecnologia Adobe Flash(TM) è data dalle transizioni tra la visualizzazione di una pagina e l’altra.

ottenere il medesimo effetto utilizzando tecnologie web compilant spesso fa cadere nel tranello Ajax: tecnologia non adatta a questo scopo, elimina infatti il riferimento alla singola pagina (tra le altre cose in giro per il web leggo ancora la frase “[..]realizzato con animazioni Ajax“, invito queste persone a studiare cosa rappresenti questa tecnologia che non ha nulla a che vedere con gli effetti grafici).

La soluzione è, in ogni caso, semplicemente javascript e la gestione degli eventi “catturando” i click effettuati sul link, dunque ritardando il trasferimento sulla pagina successiva applicando un’animazione (ma non annoiate l’utente, il tempo è una risorsa).

L’esempio

L’esempio riportato in questo post vuole mostrare come creare delle semplici animazioni nella fase iniziale di caricamento della pagina (con preload degli assets) e tra il passaggio da una all’altra pagina.

Partiamo con una semplice animazione: tre stripes disegnate con un qualsiasi software grafico e qualche codice Javascript. Ognuna di queste verrà trattata separatamente secondo timeline different e darà l’illusione ottica di un’animazione a “pennello”.
Prima di tutto prepariamo le tre immagini da applicare alla nostra animazione:

Queste verranno sovrapposte in tre DIV collocati nelle medesime coordinate e verrà applicata un’interpolazione sul valore dell’altezza da 0px alla lunghezza effettiva dell’immagine.

codice CSS

#zen1
{
	position:absolute;
	left:0px;
	right:0px;
	width:300px;
	height:0px;
	background-image:url('assets/zen_1.png');
	background-color:transparent;
	z-index:0;

}
#zen2
{
	position:absolute;
	left:0px;
	right:0px;
	width:300px;
	height:0px;
	background-image:url('assets/zen_2.png');
	background-color:transparent;
	z-index:0;
}
[...]

Oltre a queste stripes verrà presentato un container in cui sarà incluso il testo della pagina.

Una volta arrivati sulla pagina, nascondiamo gli elementi da animare

Codice JS

$('zen1').setStyle('opacity',0);
[..]

Facciamo partire l’animazione solo quando le tre stripes saranno state caricate all’interno della cache (altrimenti l’effetto non sarà soddisfacente in caso di connessione più lenta del previsto o sovraccarico del sistema)

var imgs = new Asset.images(['assets/zen_1.png', 'assets/zen_2.png','assets/zen_3.png'], {
    onComplete: function(){
//code here
}
});

Completato il preload, avviamo le animazioni trattando separatamente ogni div, andando ad aggiungere un ritardo nell’elaborazione dei singoli elementi (funzione delay)

 zen1.morph({
		'height':'450px',
		'opacity':1
	});
	(function()
	{
		zen2.morph({
		'height':'450px',
		'opacity':1
	});
	}).delay(100);
	(function()
	{
		zen3.morph({
		'height':'450px',
		'opacity':1
	});
	}).delay(200);
	(function()
	{
	content.tween('opacity',.8);
	}).delay(2000);

E’ chiaro che a questo punto manca la gestione delle animazioni per il cambio pagina: associamo un id al tag <a> che ci interessa:

Codice HTML

Page 2

Procediamo alla cattura dell’evento e gestione delle animazioni, ritardando il trasferimento alla pagina successiva

Codice JS

  $('page2').addEvent('click',function()
	{
		content.tween('opacity',0);
		zen1.tween('opacity',0);
		zen2.tween('opacity',0);
		zen3.tween('opacity',0);
		(function()
		{
		location.href="page_2.html";
		}).delay(1000);
	
	});

Semplicemente, nella pagina successiva, saranno generate delle animazioni che daranno l’illusione di continuità relativamente agli effetti generati nella transizione precedente.

Concludendo ci sono ancora molte strade da percorrere per garantire certi effetti grafici che fino a poco tempo fa erano ottenibili solo grazie a Flash; il monito più importante è sempre legato ad evitare di abusare delle animazioni, alcune di queste possono peggiorare la user-experience rallentando l’approccio e la leggibilità di un’applicazione web.

Per tutto il resto, c’è da divertirsi.

Demo Download