Scroll Animation con Vanilla JS e CSS

Introuzione

In questa quida vedremo come creare delle scroll animations con JS Vanilla e CSS.

Intersection Observer API

Per ottenerle utilizzeremo questa API: ciò che fa è determinare se un elemento del DOM è visibile all'utente finale.

HTML & CSS

Per questa parte avrete carta bianca. In questo caso animeremo delle scritte. Per avere abbastanza spazio per lo scroll ho dato ad ogni <section> un'altezza di 100vh e ho centrato i titoli <h1> con display:grid; e place-items: center. Identifichiamo gli elementi che vogliamo osservare con una classe: in questo caso hidden e le diamo un' opacity: 0; (poichè inizialmente questi elementi non saranno visibili).
Inoltre creiamo un'altra casse show con opacity: 1; che andremo ad aggiungere agli elementi con classe hidden quando saranno visibili all'utente finale. Per rendere tutto più fluido aggiungiamo una transizione transition: all .6s a hidden.

<section class="hidden">
  <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

<section class="hidden">
  <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

<section class="hidden">
  <h1>
    Lorem ipsum dolor sit amet consectetur adipisicing elit.
  </h1>
</section>

section{
  height: 100vh;
  background-color: #1B1F24;
  color: #ffffff;
  display: grid;
  place-items: center;
}

.hidden{
  opacity: 0;
  transition: all .6s;
}

.show {
  opacity: 1;
}

JavaScript

Ora prendiamo tutti gli elementi con classe hidden:

const hiddenElements = document.querySelectorAll(".hidden");

Il prossimo step è quello di creare l'intersection observer che è una classe che prende una callback nel suo constructor.
Il vantaggio è che può osservare più elementi allo stesso tempo. Quindi itereremo ogni entry con un forEach:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
  })
})

Questa funzione verrà eseguita ogni volta che la visibilità di un elemento osservato cambierà.

Ora aggiungeremo un check su ogni entry per vedere se è visibile nel viewport, ed in caso avvenga aggiungeremo all'elemento la classe show dichiarata in precedenza:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting){
      entry.target.classList.add('show');
    }
  })
})

Se vogliamo che l'animazione venga eseguita ogni volta che un elemento rientra nel viewport ci basterà inserire un else statement in cui togliamo la classe show:

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if(entry.isIntersecting){
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove('show');
    }
  })
})

Ora che abbiamo l'observer dobbiamo dirgli cosa osservare: in questo caso possiamo fare un loop su tutti gli elementi e dire all'observer di osservare ogniuno di essi:

hiddenElements.forEach((el) => observer.observe(el));

Esempio pratico

In questo esempio potete notare che le scritte animate provengono da destra. Per ottenere questo effetto basta giocare con le proprietà di trasformazione CSS:

.hidden{
  opacity: 0;
  transform: translateX(100px);
  transition: all .6s;
}

.show {
  opacity: 1;
  transform: translateX(0px);
}

Spero questa mini guida vi sia piaciuta , considera di mettere ❤️ al post e seguirmi sui miei social:

Linkedin
GitHub