Vanilla JS 및 CSS와 스크롤 애니메이션

소개

Questa quida vedremo에서 JS Vanilla e CSS와 함께 delle 스크롤 애니메이션을 만들 수 있습니다.

교차 관찰자 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. caso caso animeremo delle scritte에서. Per avere abbastanza spazio per lo scroll ho dato ad ogni<section> un'altezza di100vh e ho centrato i titoli<h1> condisplay:grid; eplace-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 piu 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;
}

자바스크립트

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 ognientry와 unforEach:

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 pregenza:

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 unelse 문 in cui togliamo la classeshow:

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 fee un loop su tutti gli elementi e dire all' observer di osservare ogniuno di essi:

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

에스엠피오 프라티코

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 , thinka di mettere ❤️ al post e seguirmi sui miei 사회적:

GitHub