Introduzione
ScrollReveal è una libreria JavaScript robusta e flessibile che consente di animare facilmente gli elementi che entrano o escono dal viewport.
Quick Start
Includiamo la libreria nell'html:
<script src="https://unpkg.com/scrollreveal"></script>
Questo ci fornisce la funzione costruttore ScrollReveal(), che useremo in seguito.
Prima animazione
Una semplice configurazione:
<h1 class="appear-from-bottom">
Hello World!
</h1>
ScrollReveal().reveal('.appear-from-bottom');
Opzioni di animazione
ScrollReveal.js offre varie opzioni di personalizzazione per ottenere l'effetto desiderato:
-
Delay: è il tempo in millisecondi prima dell'inizio delle animazioni, es.
{ delay: 500 }. -
Distance: controlla quanto distanti si muovano gli elementi quando rivelati, es.
{ distance: '50px' }. -
Duration: controlla il tempo di completamento delle animazioni in millisecondi, es.
{ duration: '600 }. -
Easing: controlla la transizione delle animazioni tra i valori iniziali e finali, es.
{ easing: 'ease-in' }. -
Inverval: è il tempo che intercorre tra ogni reveal, es.
{ interval: 600 }. -
Opacity: specifica l'opacità che hanno prima di essere rivelati, es.
{ opacity: 0.8 }. -
Origin: specifica da quale direzione provengono gli elementi quando vengono rivelati, es.
{ origin: 'top' }(accetta anche:bottom,left,right). -
Rotate: specifica la rotazione che gli elementi hanno prima di essere rivelati, es.
{ rotate: { x: 20, z: 20 }. -
Scale: specifica la dimensione degli elementi prima di essere rivelati, es.
{ scale: 0.85 }.
Esempio Pratico
Un esempio di come può essere utilizzata la libreria per avere diverse animazioni mentre si scrolla la pagina:
ScrollReveal().reveal('.appear-left', {
origin: 'left',
delay: 1000,
duration: 600,
distance: '100px',
});
ScrollReveal().reveal('.appear-right',{
origin: 'right',
delay: 1000,
duration: 600,
distance: '100px',
});
Lo stesso codice viene usato nel seguente codepen:
Risorse Aggiuntive
Per ulteriori configurazioni, metodi e callbacks visita la pagina API di ScrollReveal.js
Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:
Top comments (0)