Fading del testo

Un effetto abbastanza gradevole è quello del fading di un testo, meglio conosciuto con il nome di sfumatura.
Per creare questo effetto ci sono almeno due modi, uno un po' più "rozzo" ma efficace, e un'altro più raffinato.
Il primo consiste nel creare del testo colorato su di una pagina con sfondo uniforme, e con una serie di passaggi farlo diventare del colore dello sfondo. Altresì questo effetto può essere usato non solo per far "sparire" il testo, ma anche per fare un passaggio di colore. In pratica si tratta del semplice cambiamento di colore, ma più complesso, con più sfumature.
Il secondo metodo, più raffinato, permette di ottenere l'effetto fading anche su uno sfondo con immagini, dato che non agisce sul colore dell'oggetto, ma sulla sua trasparenza. Con questo secondo metodo utilizziamo l'attributo Css filter: Alpha(Opacity=n, FinishOpacity=n, Style=n, StartX=n, StartY=n, FinishX=n, FinishY=n); (Attenzione: funziona solo con Internet Explorer!)
Qui sotto analizzeremo il primo tipo, più semplice di fading.
Il problema che si pone in questo caso è che è difficile generalizzare i passaggi intermedi di colore in modo che lo script li gestisca da solo. Infatti se è vero che tramite chiamate a document.bgColor e document.fgColor si possono ottenere i valori dello sfondo e del testo, è abbastanza complesso scrivere una funzione che permetta un fading tra i due colori, e fare in modo che il risultato simuli la variazione di trasparenza.
Il seguente quindi sarà uno script generale sì, ma che dovrete modificare per rispecchiare le vostre esigenze.

<div id="fading_facile" onmouseover="gestione_fade();" style="width:150">
Testo con fading
</div>

<script language="javascript">

var i=0;
function fade_facile()
{
//Per trovare le varie sfumature potete
//servirvi di un programma di fotoritocco
//che permetta di inserire o vedere il
//valore delle componenti del colore in
//decimale (0-255). Invece per trovare i
//valori esadecimali mi sono servito di
//un convertitore decimale-esadecimale
//che potete trovare girando un po' per la rete.

var array_colori = new Array('#00ff00','#00E600','#00C800','#00aa00','#008200','#006400','#003200', '#000000'); //Questo è l'array di colori da modificare

if (i>7)
{
return;
}

else
{fading_facile.style.color=array_colori[i];}
i++;

}

function gestione_fade()
{
var intv=setInterval('fade_facile()', 500);
if(i>7)
{clearInterval(intv);}
}

</script> La prima parte consiste nel creare un oggetto che conterrà la frase di cui fare il fading.
La funzione richiamata da onmouseover serve per gestire la funzione che applica il fading (controllando il valore della variabile i).
Inizia poi lo script vero e proprio.
La variabile i (che DEVE essere fuori della funzione, altrimenti non accade niente, nel senso che ogni volta che viene chiamata fade_facile() avremmo i=0 e per giunta la funzione stessa non terminerebbe mai perché i sarebbe sempre minore di otto), serve per decidere se e quale colore applicare all'oggetto.
Si crea poi un array di stringhe contenti i valori da assegnare all'oggetto. In questo caso vanno dal "lime" (#00ff00) al "black" (#000000). Qui potete sbizzarrirvi per fare quanti e quali passaggi volete, ma ricordate di cambiare il valore di i nell'if sia della funzione gestione_fade() che di fade_facile() stessa, altrimenti la funzione fade_facile() si fermerà sempre quando i>7!!! In seguito si controlla il valore di i: se è maggiore di 7 (i valori dell'array sono terminati), si esce dalla funzione (in questo caso non avrebbe avuto senso scrivere return i; perché i è esterna alle due funzioni, e quindi è accessibile da entrambe.
Se invece siamo nell'intervallo degli i validi, all'oggetto viene applicato il colore dell'array corrispondente all'indice i e quest'ultima viene incrementata.

Qui finisce la funzione che si occupa di assegnare il colore, e inizia quella che gestice la funzione fade_facile(). Viene settato un intervallo che automaticamente fa partire la funzione; in base ad un controllo sulla variabile i si decide se applicare di nuovo fade_facile() oppure se cancellare l'intervallo, interrompendo l'esecuzione della funzione.

Ecco un esempio di cosa succede con lo script sopra (passate sopra alla scritta per iniziare il fading):

Testo con fading

Adesso invece vediamo di utilizzare la seconda scelta, più raffinata, con un piccolo aiuto che ci viene dai CSS. Per ora limitiamoci a riprodurre la stessa cosa di prima (ovvero solo qualche passaggio), usando però l'alpha channel:

<style>
.zero {filter: Alpha(Opacity=100, FinishOpacity=0, Style=0);}
.uno {filter: Alpha(Opacity=80, FinishOpacity=0, Style=0);}
.due {filter: Alpha(Opacity=60, FinishOpacity=0, Style=0);}
.tre {filter: Alpha(Opacity=40, FinishOpacity=0, Style=0);}
.quattro {filter: Alpha(Opacity=20, FinishOpacity=0, Style=0);}
.cinque {filter: Alpha(Opacity=0, FinishOpacity=0, Style=0);}
</style>

<div id="alphachann" style="width:150px" onmouseover="gest_alpha()" class="zero">
Prova alpha channel
</div>

<script language="javascript">

var k=0;

function alphamod()
{
var array_classi = new Array("zero", "uno", "due", "tre", "quattro", "cinque");

if(k>5)
{return;}

else
{
alphachann.className=array_classi[k];
}
k++;

}

function gest_alpha()
{
var alpha_intv=setInterval('alphamod()', 500);

if (k>5)
{
clearInterval(alpha_intv);
}

}

</script> Il funzionamento è lo stesso dello script precedente, solo con qualche modifica. Vediamole subito:
all'inizio bisogna stabilire sei classi css (per comodità le ho chiamate con i numeri da uno a cinque, ma potete assegnarli qualsiasi nome). Per ognuno di essi ho settato la trasparenza che l'oggetto a cui sono associati deve avere: 100 per il primo e, scalando di un 20% alla volta, giù fino ad avere Opacity=0 per la classe cinque.
Subito dopo è definito l'oggetto sul quale applicheremo lo script. Per comodità gli applichiamo subito la classe zero.
Lo script è sostanzialmente quello precedente, salvo che adesso l'array contiene i nomi delle sei classi specificate dentro <style>...</style>, che vengono applicate tramite la chiamata di alphachann.className=array_classi[k];.

Lo script funziona soltanto con IE

Come per il precedente esempio, passate il mouse sopra la scritta per fare iniziare l'effetto:

Prova alpha channel

Adesso abbiamo visto che con uno sfondo uniforme il risultato è pressochè lo stesso, il testo diventa sempre più trasparente, fino a scomparire. Vediamo invece che cosa succede ad usare gli stessi due script con una immagine di sfondo (qui è lo sfondo di una tabella, ma succede lo stesso con uno sfondo di una pagina). Passate sopra alle scritte con il mouse per applicare l'effetto.

Primo esempio (array di colori)

Secondo esempio (array di trasparenza)

Se avete applicato l'effetto ad entrambe le frasi, avrete notato che la prima, nonostante abbia cambiato colore, è ancora visibile, per il fatto che abbiamo usato un array di colori. Questo andava bene con uno sfondo uniforme (e nero!!! Con un altro colore il risultato sarebbe stato come questo che vedete, a meno di non ridefinire l'array!!!).
Nel secondo esempio, invece la scritta è diventata completamente trasparente, un po' come se si fosse scritto style="visibility:hidden".
Facendo due conti, il secondo è preferibile, ma ha lo svantaggio di essere visibile solo con IE, e per avere il solito effetto con Navigator bisogna ricorrere al primo (per lo meno non sono al corrente di un metodo per modificare la trasparenza, che funzioni sul browser di Netscape. Se lo sapete scrivetemi pure!).
Ora che avete gli strumenti per far apparire o scomparire gli oggetti, basta avere un po' di fantasia per creare animazioni che non richiedono l'uso di particolari programmi, ma solo un po' di creatività e qualche riga di codice.