Intersection Observer를 사용한 간단한 애니메이션

웹 사이트에 애니메이션이 있지만 문제는 해당 섹션으로 스크롤하는 순간 애니메이션이 완료된다는 것입니다. 물론 사용자가 애니메이션을 보기를 원하므로 뷰포트에 표시될 때까지 애니메이션을 어떻게 지연시킬 것입니까?

이 기사에서는 Intersection Observer API를 사용하여 이를 수행하는 한 가지 방법을 보여드리겠습니다.

클래스 이름이 "demo"인 div 요소를 만들었습니다.

<div class="demo"><div>
 

.demo{
  width: 100vw;
  height: 200px;
  background: orange;
  top: 100vh;
  left: 0vw;
  position: relative;
} 

@keyframes left-right 
{
  0% {left: -90vw;}j
  100% {left: 0px;}

.left-right 
{
 animation-name: left-right;
 animation-duration: 2s;
 animation-iteration-count: 1;
}

// create observer
const observer = new IntersectionObserver(entries => {
  // Loop over the entries(even if we only asks one element to observe)
   entries.forEach(entry => {
   
      // If the element is visible
    if (entry.isIntersecting) {
      entry.target.classList.add('left-right');
	  return; // if we added the class, exit the function
    }

    // We're not intersecting, so remove the class!
   entry.target.classList.remove('left-right');
  });
});

//tell observer to track the element
observer.observe(document.querySelector('.demo'))

"entry.target.classList.remove('left-right');" 라인은 div 요소가 화면에 보이지 않을 때마다 애니메이션 .left-right 클래스를 제거합니다. 애니메이션 설정에서 0%로 -90vh를 설정하여 10vh가 보이도록 설정한 것을 기억하십니까? 그 이유는 javascript 함수가 여전히 div 요소를 볼 수 있고 애니메이션이 진행되는 동안 .left-right 클래스가 제거되지 않기 때문입니다. 애니메이션 .left-right 클래스가 어느 시점에서 요소를 화면에 보이지 않게 만들면 함수가 호출될 때 다른 결과를 제공합니다. js 스크립트는 화면에서 클래스를 볼 수 없으므로 클래스를 제거한 다음 div 요소는 원래 위치를 다시 표시하고 왼쪽: 0vh가 표시되면 함수를 다시 호출하고 애니메이션을 추가합니다. 그러면 애니메이션의 초기 위치로 인해 다시 보이지 않게 됩니다. 클래스가 계속해서 제거되고 추가되므로 예상한 대로 애니메이션 프로세스가 표시되지 않습니다. “entry.target.classList.remove('left-right');” 줄을 제거할 수 있습니다. 애니메이션을 한 번만 실행하려는 경우 애니메이션이 포함된 클래스가 어느 시점에서 요소를 표시하지 않도록 해도 괜찮습니다.

이것은 위치/가시성에 기반한 애니메이션의 한 가지 방법일 뿐입니다. 웹 사이트에 애니메이션을 사용하면 시청자가 더 오래 머물게 할 수 있습니다.