{ Dissolvenza effetto fade con jQuery }

Dissolvenza in ingersso e uscita per pagine web

Volete dare un effetto di classe alle pagine web eseguendo una transizione al cambio pagina con una morbida dissolvenza? Siete nel posto giusto! ...
Non pensate sia complicato o ci vogliano molte righe di codice, basta includere il CDN jQuery e qualche riga con javascript e il gioco è fatto. Un esempio per capire qui sotto, prova a cliccare sulle voci del menu...



Per "pilotare" il codice javascript, abbiamo bisogno di avere un riferimento nel menu, la classe "dissolvi" vediamo subito in dettaglio come è composto il menu.

Codice:
<ul>
<li><a href="fade-home.php" class="dissolvi">Home</a></li>
<li><a href="fade-contenuti.php" class="dissolvi">Contenuti</a></li>
<li><a href="fade-contatti.php" class="dissolvi">Contatti</a></li>
</ul>

Possiamo notare "nell'elenco ordinato" (menu) la classe "dissolvi" è comune ad ogni voce del menu, con questo credo vi sia brillato nel capoccione un'idea! Al click dell'elemento si "scatena" una funzione, proprio quella della dissolvenza (fade) che è una funzione di jQuery, "fadeIn / fadeOut" e rispettivamente significa dissolvenza in ingresso e dissolvenza in uscita. Vediamo subito il codice ben commentato che va a fugare qualsiasi dubbio...

Codice:
<script type="text/javascript">
$(document).ready(function(){
         //al caricamento della pagina nascondiamo il body
   $('body').css('display', 'none');
         //e successivamente facciamo dissolvenza in ingresso di 1 secondo
   $('body').fadeIn(1000);
         //al click degli elementi con classe 'dissolvi'
   $('.dissolvi').click(function(event) {
         //intercettiamo e blocchiamo l'evento del cambio pagina 
         //altrimenti al click non avremo la dissolvenza ma immediatamente il cambio pagina
      event.preventDefault();
         //valorizziamo una variabile che contenga l'indirizzo da 'puntare'
      var url = this.href;
         //A questo punto ci occupiamo della dissolvenza in uscita di 1 secondo della pagina
      $('body').fadeOut(1000, function() {
         //conclusa la funzione fade out possiamo prendere il contenuto della variabile
         //che memorizza l'indirizzo e lo puntiamo per cambiare pagina
         window.location.assign(url);
      });
   });
});
</script>

Con questo è tutto, in testa alla pagina potete scaricare liberamente in blocco tutto il codice e le istruzioni d'installazione, non mi rimane che augurarvi buon lavoro...

Siti Web

Da 20 anni Filomeni Maurizio si dedica con passione e tenacia al mondo del web, le sue realizzazioni sono sempre all'avanguardia perchè la sua passione divenuta professione è al passo con i tempi e sempre in fase di studio e ricerca. Grazie ai suoi collaboratori riesce a dedicare il maggior tempo alla programmazione back-end rendendo le applicazioni molto precise e sofisticate. Dopo un attento monitoraggio, Siti Web diventa Partner Partnership di Aruba Group S.p.A

Newsletter & Info

Iscriviti alla nostra newsletter per ricevere aggiornamenti e novità, non riceverai mail indesiderate da parte nostra, odiamo lo spam!


Ti Piace Siti Web?