Ultima modifica da un moderatore:
Creare uno Sroll Animation CSS
In questa guida vi illustrerò come fare a creare una fantastica animazione CSS che si effettuerà solamente dopo aver scrollato la pagina e quindi aver raggiunto il punto di "comparsa" dell'elemento al quale assegneremo un animazione.
Questo effetto è realizzato con la libreria Animate.css e con lo script WOW.js .
Passiamo ora alla spiegazione di come personalizzare tutto ciò:
| Modifica HTML |
HTML:
<link rel="stylesheet" href="http://biuni.altervista.org/guide/scrollanimation/css/animate.css">
HTML:
<div id="esempio" class="wow bounceInDown" data-wow-offset="100"> </div>Inserire all'elemento che si vuole animare questa porzioni di codice [ class="wow bounceInDown" data-wow-offset="100" ].
Per personalizzare l'effetto di animazione basterà cambiare la parte bounceInDown con una di quelle che trovate qui. (Non cancellare la parte wow altrimenti non funzionerà)
Per un ulteriore personalizzazione si possono inserire e/o modificare i seguenti campi:
- data-wow-duration: Cambia la durata dell'animazione
- data-wow-delay: Cambia il tempo di attesa prima che l'animazione parta
- data-wow-offset: Distanza alla quale l'animazione parte (riferita al fondo del browser)
- data-wow-iteration: Numero di ripetizioni dell'animazione
| Modifica CSS |
Questo script funziona con la libreria Animated.css quindi voi non dovrete fare niente, è già tutto pronto
| Modifica JS |
Codice:
<script src="http://biuni.altervista.org/guide/scrollanimation/js/wow.js"></script>
<script>
wow = new WOW();
wow.init();
</script>FUNZIONA ANCHE PER MOBILE.
Spero la guida vi sia piaciuta, per qualsiasi dubbio o domanda resto a disposizione.
Guida scritta interamente da Biuni per Inforge.net |Vietata la riproduzione|
