Come mettere un effetto di transizione "fade" alle nostre pagine web, con il minimo sforzo e con pochissime righe di codice.
Partiamo dalnostro file CSS, e aggiungiamo i parametri che seguono:
.page-in {
-webkit-animation: fadeIn .3s ease-in;
animation: fadeIn .3s ease-in;
}
.page-out {
-webkit-transition: opacity .3s;
transition: opacity .3s;
opacity: 0;
}
@-webkit-keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}dove .3s indica il tempo di esecuzione dell'animazione/transizione (potrete di conseguenza regolarlo a vostro piacimento ma non fatelo troppo lento per favore heheh)
Andate adesso sulla parte HTML del vostro tema/pagina e assegnate al tag body la classe page-in
<body class="page-in">A questo punto i parametri CSS hanno già dato l'effetto fade in entrata. Non resta che portarci alla fine della pagina, subito prima del tag di chiusura body e aggiungere il codice javaScript che segue:
<script>
window.addEventListener("beforeunload", function () {
document.body.classList.add("page-out");
});
</script>
</body>Ricaricate la pagina (magari pulendo la cache) e il vostro sito avrà finalmente un effetto di transizione tra pagine che renderà la navigabilità del sito decisamente migliore.