DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for Scroll Animation con Vanilla JS e CSS
Giandomenico Pagliara
Giandomenico Pagliara

Posted on

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>
Enter fullscreen mode Exit fullscreen mode
section{
  height: 100vh;
  background-color: #1B1F24;
  color: #ffffff;
  display: grid;
  place-items: center;
}

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

.show {
  opacity: 1;
}
Enter fullscreen mode Exit fullscreen mode

JavaScript

Ora prendiamo tutti gli elementi con classe hidden:

const hiddenElements = document.querySelectorAll(".hidden");
Enter fullscreen mode Exit fullscreen mode

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) => {
  })
})
Enter fullscreen mode Exit fullscreen mode

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

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

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

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

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

Linkedin
GitHub

Top comments (1)

Collapse
 
naubit profile image
Al - Naubit

Great article, keep the good work! Liked and followed! πŸš€

Stop sifting through your feed.

Find the content you want to see.

Change your feed algorithm by adjusting your experience level and give weights to the tags you follow.