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:
Top comments (1)
Great article, keep the good work! Liked and followed! 🚀