MICHELEPISANI.IT
 

Effetto dissolvenza di elementi in una pagina web

FadeIn e FadeOut: effetto dissolvenza

Javascript - FadeIn e FadeOut effetto dissolvenza
Luglio 03
07:052014

L'effetto dissolvenza, conosciuto anche come fadeIn e fadeOut a seconda che tale effetto termini rispettivamente con la visualizzazione o la scomparsa dell'elemento, è molto utilizzato nelle pagine web di molti siti per gli scopi più disparati come ad esempio la comparsa o la chiusura di un messaggio di informazioni o di conferma per una determinata azione effettuata. Con jQuery l'effetto è ottenibile con una sola riga di codice ma nel caso in cui non si voglia utilizzare tale libreria Javascript e magari l'unico effetto che ci serve è proprio quello della dissolvenza ed aggiungere la libreria diventerebbe uno spreco di risorse ed un inutile appesantimento delle pagine web è possibile ottenere lo scopo utilizzando Javascript puro.

Il blocco di codice seguente mostra come ottenere tale effetto utilizzando due funzioni una per il fadeIn e l'altra per il fadeOut. La funzione può essere sicuramente ottimizzata, volendo è possibile compattarla in una unica e gestire il toggle per la dissolvenza in entrata ed in uscita ma per gli scopi di questo articolo le due funzioni sono più che sufficienti per capire come tale effetto possa essere raggiunto avvalendosi del setTimeout e delle proprietà opacity e requestAnimationFrame:


<div id="container">
  <div id="target">www.michelepisani.it</div>
</div>
<div id="buttons_container">
  <button onclick="fadeInFunc()">Fade IN</button>
  <button onclick="fadeOutFunc();">Fade OUT</button>
</div>

<script type="text/javascript">
  function fadeInFunc() {
    var el = document.getElementById("target");
    el.style.opacity = 0; 
    var tick = function() {
      el.style.opacity = +el.style.opacity + 0.01;
      if (+el.style.opacity < 1) {
        (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
      }
    };
    tick();
  }

  function fadeOutFunc() {
    var el = document.getElementById("target");
    el.style.opacity = 1; 
    var tick = function() {
      el.style.opacity = +el.style.opacity - 0.01;
      if (+el.style.opacity > 0) {
        (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16)
      }
    };
    tick();
  }
</script>



Nel tab "Result" dell'esempio di seguito potete apprezzarne l'effetto dal vivo.

Tags
Condividi

Autore

Michele Pisani

Michele Pisani

Ho uno spiccato orientamento al problem-solving, se è troppo facile non mi diverto :)
Credo nella volontà e nel cambiamento perchè hanno fatto della mia passione il mio pane quotidiano.
Se devo descrivermi con una sola parola direi... "Concretezza", la mia stretta di mano è una garanzia.

0 Commenti

Non ci sono commenti

Nessuno ha ancora commentato questo articolo, fallo tu per primo!

Scrivi un Commento

Scrivi un Commento

Il tuo indirizzo email non sarà pubblicato.
I campi contrassegnati da un * sono obbligatori

Articoli e Argomenti correlati

Categorie popolari

Iscriviti alla mia newsletter

La tua e-mail con me sarà al sicuro.
Non fornirò mai le tue informazioni a nessuno!

Ultimi commenti

Michele Pisani

Ciao stefy,
la tua domanda non è proprio pertinente a questo articolo... ti consiglio di dare …

stefy

salve. ho un problema sulla pagina facebook..non riesco a unirla..mi dice che è in sospeso …

Michele

Ciao Antonio,
ma il tuo apk si chiama 'HelloWorld-release-unsigned.apk'?