DEV Community

Giandomenico Pagliara
Giandomenico Pagliara

Posted on • Updated on

Guida ScrollReveal.js

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>
Enter fullscreen mode Exit fullscreen mode

Questo ci fornisce la funzione costruttore ScrollReveal(), che useremo in seguito.

Prima animazione

Una semplice configurazione:

<h1 class="appear-from-bottom">
    Hello World!
</h1>
Enter fullscreen mode Exit fullscreen mode
ScrollReveal().reveal('.appear-from-bottom');
Enter fullscreen mode Exit fullscreen mode

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',
});
Enter fullscreen mode Exit fullscreen mode

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:

Linkedin
GitHub

Top comments (0)