Avete fatto caso all'animazione in cima alla pagina delle news? (N.d.R.: adesso non c'è più ma guardate in fondo a questa pagina per vederne un esempio) Beh, sappiate che è un esempio di animazione semplice ma abbastanza gradevole fatta con il javascript. Non è molto difficile da realizzare e qui sotto c'è il codice che spiega come farla. Come sempre il codice è commentato a fianco e alla fine del documento è mostrato il risultato. Se ne voltete una identica fate semplicemente un copia-incolla, altrimenti se avete capito un po' come funziona potete usare questo codice come base per fare delle variazioni sul tema...

<table border="1" style="border:6px solid red" id="uno"> <tr><td> <table border="1" style="border:5px solid red" id="due"> <tr><td> <table border="1" style="border:4px solid red" id="tre"> <tr><td> <table border="1" style="border:3px solid red" id="quattro"> <tr><td> <table border="1" style="border:2px solid red" id="cinque" style="bgColor:yellow"> <tr><td> <h1><font face="Comic sans Ms" color="white"> News dal mondo </td></tr> </table></td></tr> </table></td></tr> </table></td></tr> </table></td></tr> </table></td></tr> <script language="javascript"> function colore_scorre() { // Passa dal rosso al blu if (!document.all) return else if ( (uno.style.borderColor=="red")&& (due.style.borderColor=="red")&&(tre.style.borderColor=="red")&& (quattro.style.borderColor=="red")&&(cinque.style.borderColor=="red")) uno.style.borderColor="blue"; else if ( (due.style.borderColor=="red")&& (uno.style.borderColor=="blue")&&(tre.style.borderColor=="red")&& (quattro.style.borderColor=="red")&&(cinque.style.borderColor=="red")) due.style.borderColor="blue"; else if ( (tre.style.borderColor=="red")&& (due.style.borderColor=="blue")&&(uno.style.borderColor=="blue")&& (quattro.style.borderColor=="red")&&(cinque.style.borderColor=="red")) tre.style.borderColor="blue"; else if ( (quattro.style.borderColor=="red")&& (due.style.borderColor=="blue")&&(tre.style.borderColor=="blue")&& (uno.style.borderColor=="blue")&&(cinque.style.borderColor=="red")) quattro.style.borderColor="blue"; else if ( (cinque.style.borderColor=="red")&& (due.style.borderColor=="blue")&&(tre.style.borderColor=="blue")&& (quattro.style.borderColor=="blue")&&(uno.style.borderColor=="blue")) cinque.style.borderColor="blue"; /*Passa dal blu al giallo. Tutte le condizioni servono altrimenti al primo ritorno del blu sulla prima tabella cicla su rosso/blu*/ else if ( (uno.style.borderColor=="blue")&& (due.style.borderColor=="blue")&&(tre.style.borderColor=="blue")&& (quattro.style.borderColor=="blue")&&(cinque.style.borderColor=="blue")) uno.style.borderColor="yellow"; else if ( (due.style.borderColor=="blue")&& (uno.style.borderColor=="yellow")&&(tre.style.borderColor=="blue")&& (quattro.style.borderColor=="blue")&&(cinque.style.borderColor=="blue")) due.style.borderColor="yellow"; else if ( (tre.style.borderColor=="blue")&& (due.style.borderColor=="yellow")&&(uno.style.borderColor=="yellow")&& (quattro.style.borderColor=="blue")&&(cinque.style.borderColor=="blue")) tre.style.borderColor="yellow"; else if ( (quattro.style.borderColor=="blue")&& (due.style.borderColor=="yellow")&&(tre.style.borderColor=="yellow")&& (uno.style.borderColor=="yellow")&&(cinque.style.borderColor=="blue")) quattro.style.borderColor="yellow"; else if ( (cinque.style.borderColor=="blue")&& (due.style.borderColor=="yellow")&&(tre.style.borderColor=="yellow")&& (quattro.style.borderColor=="yellow")&&(uno.style.borderColor=="yellow")) cinque.style.borderColor="yellow"; //Passa dal giallo al rosso else if ( (uno.style.borderColor=="yellow")&& (due.style.borderColor=="yellow")&&(tre.style.borderColor=="yellow")&& (quattro.style.borderColor=="yellow")&&(cinque.style.borderColor=="yellow")) uno.style.borderColor="red"; else if ( (due.style.borderColor=="yellow")&& (uno.style.borderColor=="red")&&(tre.style.borderColor=="yellow")&& (quattro.style.borderColor=="yellow")&&(cinque.style.borderColor=="yellow")) due.style.borderColor="red"; else if ( (tre.style.borderColor=="yellow")&& (due.style.borderColor=="red")&&(uno.style.borderColor=="red")&& (quattro.style.borderColor=="yellow")&&(cinque.style.borderColor=="yellow")) tre.style.borderColor="red"; else if ( (quattro.style.borderColor=="yellow")&& (due.style.borderColor=="red")&&(tre.style.borderColor=="red")&& (uno.style.borderColor=="red")&&(cinque.style.borderColor=="yellow")) quattro.style.borderColor="red"; else if ( (cinque.style.borderColor=="yellow")&& (due.style.borderColor=="red")&&(tre.style.borderColor=="red")&& (quattro.style.borderColor=="red")&&(uno.style.borderColor=="red")) cinque.style.borderColor="red"; } setInterval("colore_scorre()", 500) </script>

Nella prima parte si definiscono cinque tabelle una dentro all'altra e si assegna loro il nome attraverso l'attributo id. Questo è indispensabile perché il codice javascript farà riferimento alla proprietà colore del bordo di ogni tabella, quindi è necessario che tutte le tabelle siano identificabili univocamente. Tramite l'uso di style si imposta di default un bordo rosso per i primi quattro e giallo per l'ultimo in modo da porci nella condizione iniziale della funzione colore_scorre dello script. Inoltre i bordi delle tabelle hanno dimensioni sempre più piccole da quella esterna a quella interna, per dare l'effetto di profondità. Passiamo ora a vedere lo script. È lungo ma semplice, anche da spiegare. In poche parole si tratta di una serie di verifiche tramite if e else if su quale è la situazione attuale dei colori dei bordi delle tabelle. Per accedere ai colori si usa questa sintassi: id_della_tabella.style.borderColor e il risultato è la restituzione di una stringa che contiene il colore del bordo della tabella specificata. Finito il controllo della situazione si aggiorna la tabella (una sola per volta!) più interna. Questo ragionamento viene ripetuto per tutti i colori che si vuole (in questo caso sono solo tre, ma nessuno vieta di metterne anche 720993 :-D ). Ho anche provato a spremere un po' il codice (a volte non sarebbe necessario verificare proprio tutti i colori, ma solo quello delle tabelle più vicine a quella da modificare), ma il problema è che alcune volte (come scritto nei commenti) ne servono di più per non mandare in palla tutto. Allora ho fatto prima a fare un copia-incolla e modificare via via i valori piuttosto che stare a rosicchiare quattro o cinque righe di codice ma perderci del tempo a testare molte volte. Alcuni (almeno due o tre amici me lo diranno di sicuro!) diranno: "questo non è professionale!" ma vi rispondo che per una cavolata come questa la professionalità la mando in cavalleria, e che la uso per le cose serie!. Un'ultima nota: in fondo c'è il metodo setInterval() che ripete ogni 500 millisecondi (mezzo secondo, per i pigri!) la funzione colore_scorre.

L'effetto risultante è questo:

News dal mondo

Adesso non vi resta che passare a vedere gli altri esempi, quindi cliccate qui sotto per chiudere la finestra. Noterete che il browser vi avverte che l'applicazione sta cercando di chiudere una finestra. Non vi stupite, questa è una caratteristica di sicurezza di javascript, che per evitare chiusure non voulte dall'utente (nel caso non siano esplicite come qui, ma inseirte in una funzione "invisibile" al visitatore) chiede sempre conferma a chi usa il browser!