Una bella introduzione animata aiuta i nostri siti a rimanere piu' impressi nella memoria dei visitatori. Fino ad ora non avevamo modo di realizzare effetti animati se non con Flash, ora possiamo creare animazioni accattivanti anche con poche righe di javascript e sfruttare a pieno l'unione di un buon css e di qualche bella immagine.

Innanzitutto includiamo due framework javascript utili a gestire le animazioni. Ne esistono molti utili, utili sopratutto pechè evitano al programmatore di preoccuparsi di problemi di crowssbrowsing. Per questo CODE-IT abbiamo scelto di includere MooTools e MooRD.

	<script type="text/javascript" src="js/mootools.js"></script>
	<script type="text/javascript" src="js/moo.rd.js"></script>

Successivamente disponiamo nella pagina le sezioni che identificano ogni zona della nostra scena. Nel nostro caso creeremo un div container e dentro posizioneremo il cielo, il mare, il sole e la luna. A queste zone ben distinte aggiungiamo anche un div che chiameremo msg in cui includeremo il messaggio che vogliamo proporre nella nostra intro animata.

		<div id="sky">
			<div id="msg"><br><br><br><br><br>Uno slogan d'effetto ...</div>
		</div>
		<div id="moon">
		
		</div>
		<div id="sun">
		
		</div>
		<div id="sea">
			<br><br><br><br><br><br>
			<a href="#" style="color:white">Skip</a>
		</div>
	</div>

Una intro dura diversi secondi, ma non necessariamente un utente deve essere vincolato alla visione. Per questo abbiamo messo nel mare un tag di tipo link contenente un collegamento a quella che poi sarà la prima pagina del nostro sito. In questo modo creeremo il tipico effetto di Skip per le intro.

<a href="#" style="color:white">Skip</a>

Tramite un sapiente e intuitivo uso delle informazioni di stile posizioniamo gli elementi della nostra animazione nei punti che preferiamo. Cielo, terra, sole e luna si possono quindi sovrapporre e distribuire in maniera semplice utilizzando dimensioni e attributi di margine.

body{
		background:#000000;
	}

	#sea{
		background:transparent url(img/sea.gif) no-repeat;
		position:absolute;
		width:800px;
		height:304px;
		text-align:right;
		z-index:100;
		margin-top:400px;
		font-size: 18px;
		
		color:gray;
	}

	#sun{
		background:transparent url(img/sun.png) top no-repeat;
		width:188px;
		height:182px;
		z-index:50;
		position:absolute;
		margin-top:340px;
		
	}

	#moon{
		background:transparent url(img/moon.png) top no-repeat;
		width:188px;
		height:182px;
		z-index:50;
		position:absolute;
		margin-top:40px;
		margin-left:400px;
		display:none;
	}

	#sky{
		background:transparent url(img/starnight.png) no-repeat;
		width:800px;
		height:400px;
		position:absolute;
	}

	#container{
		
		font-style:Verdana Helvetica;
		font-size: 12px;
		width:800px;
		margin:0px auto;

	}

	#msg{
		
		font-style:Verdana Helvetica;
		font-size: 22px;
		text-align:center;
		color:gray;
	}

Nel foglio di stile possiamo porre particolare attenzione all'attributo position che abbiamo posto uguale a absolute. In questa maniera i div che hanno id uguale a quello descritto nel CSS vengono collocati nella pagina in posizione assoluta, sfruttando le infroimazioni margin, widtht ed height. Il container è posizionato esattamente nel centro della pagina perche' abbiamo utilizzato margin uguale ad auto. Questa direttiva istruisce il browser a collocare automaticamente un elemento nel centro del div che contiene l'elemento in questione. Il contrario di absolute è un posizionamento relative, ovvero il browser colloca l'elemento relativamente agli altri, aggiungendo attributi di margine a quelli che lo procedono. Normalmente è preferibile utilizzare posizioni relative e dimensioni in percentuale, in questo modo su qualsiasi monitor e con qualsiasi risoluzione, il nostro sito si distribuirà meglio. In questo caso avevamo necessita' che ogni elemento fosse esattamente nella posizione in cui desideravamo che stesse, in maniera assoluta.

Nel javascript utilizzeremo alcuni effetti messi a disposizione dal plugin MooRD e un paio di istruzioni che ci vengono fornite dal framework MooTools. In particolare vedremo l'oggetto Chain di MooTools. Questo oggetto ci permette di collegare in successione diverse funzioni, ovvero le scene della nostra animazione. Far comparire i messaggi, sorgere il sole, poi il tramonto e la luna.

var myChain = new Chain();

Per scatenare la successione delle scene e le chiamate chain, utilizzeremo invece l'istruzione setInterval. Questa funzione riceve due argomenti: il primo e' una stringa contenente l'istruzione de eseguire piu' volte consecutivamente, il secondo rappresenta i millisecondi da attendere tra una esecuzione e l'altra. Nel nostro caso ad esempio le immagini si succedono ogni due secondi lanciando una chiamata callChain.

var callCh = window.setInterval("myChain.callChain()", 2000);

Di MooRD utilizzeremo invece gli effetti Gradient per far schiarire il cielo all'alba e oscurarlo al tramonto; e l'effetto Move che tramite semplici coordinate x e y fa muovere fluidamente un div o qualsiasi altro elemento, dalla posizione in cui si trova a quella espressa come argomento della funzione move.

var sky = new Fx.Gradient('sky', {duration: 1000});
		
	var rising =  function(){sky.start(['#000000','#44CCCC', '#66FFFF'])};
	var risingout =  function(){sky.start([  '#66BDBDB','#88AAAA','#CC6666','#000000' ])};
			
	
	var moveW = new Fx.Move('sun', {duration:4000, link:'chain'});

Creare animazioni per le intro è solo una delle caratteristiche che ci offrono questi effetti javascript. Con immagini con sfondo trasparente e un po' di fantasia potremo fare volare aeroplani, scorrere poesie e muovere i pianeti senza porre limiti alle nostre possibilità.