- 30 Ottobre 2008
- 270
- 0
- Miglior risposta
- 0
[INFO]Fonte:
Per avere una idea più chiara di cosa si stia facendo visita
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.
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.
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.
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
[/INFO]Per avere una idea più chiara di cosa si stia facendo visita
Perfavore,
Entra
oppure
Registrati
per vedere i Link!
.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.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
Adesso andremo a creare l’effetto verio e proprio che sfumerà l’elemento della pagina web fino a farlo sparire.
Codice:
Perfavore,
Entra
oppure
Registrati
per vedere i codici!
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.
