CSSREVOLT - blog personale di Filippo Buratti

Ricordo (senza malinconia) che anni e anni fa si usavano quelle interminabili "intro" animate in flash, prima di raggiungere i contenuti del sito; oggi ogni web designer che si rispetti ritiene deprecata una simile pratica, per le ovvie controindicazioni (i lunghi tempi di attesa rischiano di scoraggiare gli utenti dotati di connessioni lente o chi come me vuole tutte e subito, per non parlare dei catastrofici risultati con i motori di ricerca, potrei continuare ancora per molto...)

Detto questo, a scopo puramente didattico, mi sono divertito a creare una piccola intro senza l'ausilio della tecnologia flash che richiede l'installazione di un plugin proprietario, ma utilizzando solo Html, CSS e Javascript con gli effetti di Scriptaculous (e il framework Prototype). L'esempio in questione richiede che gli elementi della pagina siano nascosti con la proprietà CSS display:none, rendendo i contenuti invisibili agli screen reader e limitando fortemente l'accessibilità; inoltre i contenuti sarebbe pure invisibili se fosse disabilitato Javascript sul browser client, quindi non è destinato a un ambiente di produzione ma ci può servire ad imparare gli strumenti di Scriptaculous e ad applicarli in altri contesti più utili.

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects"></script>

Nell'esempio ho utilizzato Effect.Parallel e Effect.Queues per eseguire in sequenza le animazioni che portano all'apparizione degli elementi della pagina: ecco la demo  e il codice dello script:

function init() {
	new Effect.Appear('logo', {delay:1, duration:1, queue:'front' });
	new Effect.BlindDown('shadow', {delay:2, duration:1 });
	new Effect.Parallel(
    	[ new Effect.BlindDown("header", { sync: true, delay:5, duration:1 }), 
      	new Effect.BlindDown("footer", { sync: true, delay:5, duration:1 } ) ], 
	  	{ queue:'end', 
      		afterFinish: function() {
	  			new Effect.Parallel(
      				[ new Effect.Appear("title", { sync: true, delay:3, duration:1 }), 
      				new Effect.BlindDown("email", { sync: true, delay:3, duration:1 } ) ] 
				);
	  		} 
   		}
   	);
}

Event.observe(window, 'load', init);