Effetto fade con Javascript
4 Maggio 2008 Vai ai commentiCome già detto in un post precedente, ecco qui qualche trucchetto per realizzare un effetto fade (o sfumatura) su gli elementi di una pagina web mediante il linguaggio javascript. Per apprendere bene il procedimento che mostrerò è consigliato avere almeno una conoscenza base di CSS, Javascript e Html.
Per avere una idea più chiara di cosa si stia facendo visita la pagina di esempio.
Per realizzare l’effetto dobbiamo vedere la sfumatura del nostro elemento (ad esempio un <div>) come un variare di opacità dello stesso. Fortunatamente abbiamo una proprietà dei CSS che ci permette di impostare l’opacità di un elemento a nostro piacere.
Detto questo dobbiamo effettuare alcune considerazioni:
- Compatibilità Crossbrowser: Purtroppo non tutti i browser supportano alla stessa manierà le proprietà dei CSS, quindi dovremmo fare una distinzione. Nel mio esmpio prendo in considerazione firefox ed internet explorer.
- Durata Effetto: Potremmo scegliere quanto tempo deve durare la transazione ed esprimeremo questo valore in milli secondi.
Ci serve una funzione che imposti l’opacità dell’elemento ad un valore da noi scelto. Alla nostra funzione dovremmo passare l’id dell’elemento da sfumare ed il valore di opacità da impostare. Il valore dell’opacità deve essere compreso fra 0 e 100.
// 2 parametro: valore di opacità
function setOpacity(id, opacity) {
var element = document.getElementById(id);
if(document.all) // se sto usando internet explorer
element.style.filter = "alpha(opacity=" + opacity + ")";
else
element.style.opacity = opacity / 100;
}
Nella prima linea la funzione “prende” un riferimento all’elemento da sfumare. Successivamente si esegue un test che serve a riconoscere il browser perchè l’opacità con internet explorer si imposta in un modo diverso (vedi codice).
Adesso andremo a creare l’effetto verio e proprio che sfumerà l’elemento della pagina web fino a farlo sparire.
// 2 parametro: tempo dell’animazione
function fadeOut(divID, time) {
var speed = Math.round(time / 100); //arrotonda il valore della divisione
var frame = 0;
for(fade = 100; fade > 0; fade–) {
setTimeout("setOpacity(’"+divID+"’, "+fade+")", (speed * frame));
frame++;
}
}
Ok qui probabilmente molte cose non sono chiare, adesso spiego cosa succede (spero in maniera comprensibile). Come detto sopra il valore dell’opacità varia in un range da 0 a 100, nel nostro caso vogliamo far sparire l’oggetto quindi l’opacità iniziale sarà pari a 100 e dobbiamo portarla a 0 gradualmente per far vedere l’effetto sfumatura.
I numeri parlano chiaro, dovremmo chiamare 100 volte la funzione setOpacity per impostare ogni volta un valore di opacità più piccolo di una unità; quindi se la prima volta sarà 100, la seconda sarà 99, la terza sarà 98 e così via fino a 0.
Tutte queste iterazioni dovranno svolgersi in un arco di tempo da noi specificato (il secondo parametro passato alla funzione fadeOut), supponiamo il tempo sia 1 secondo e quindi 1000 millisecondi. Nella variabile speed andiamo ad inserire il valore in microsecondi di ognuna delle 100 iterazioni e successivamente inizializzo una variabile frame che mi terrà il conto di ogni iterazione.
Nel ciclo for si svolge il cuore della funzione, inserirsco un ritardo (funzione setTimeout) dopo il quale deve essere chiamata la funzione setOpacity. Da notare che il ritardo cambia ad ogni iterazione del ciclo for ed aumenta sempre di più perchè incremento la variabile frame. Questo cambio di delay fa vedere l’effetto fade sull’oggetto, se non ci fosse vedremmo l’oggetto scomparire subito senza nessuna transazione.
Spero che questa “spiegazione” sia utile a qualcuno, non è un argomento facile da spiegare ma ci ho voluto provare. Per maggiori chiarimenti riconduco sempre alla pagina di esempio.
Commenti recenti