페이지 스크롤 시 뷰포트에 들어갈 때만 요소에 애니메이션을 적용하려면 어떻게 해야 합니까?

페이지 스크롤 시 뷰포트의 요소 애니메이션

여러 애니메이션 요소가 있는 웹페이지에서는 이러한 애니메이션이 시작되는 시점을 제어하기가 어려울 수 있습니다. 부드러운 스크롤 애니메이션을 얻으려면 해당 요소가 표시될 때만 애니메이션을 트리거하는 방법이 필요합니다. IntersectionObserver API를 사용하여 이를 달성할 수 있는 방법은 다음과 같습니다.

IntersectionObserver API 사용

IntersectionObserver API는 뷰포트 또는 지정된 상위 요소와 관련하여 요소의 가시성을 모니터링합니다. 요소가 표시될 때 이를 사용하여 CSS 애니메이션을 전환할 수 있습니다.

코드 조각

const inViewport = (entries, observer) => {
  entries.forEach((entry) => {
    entry.target.classList.toggle("is-inViewport", entry.isIntersecting);
  });
};

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {}; // See: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_options

// Attach observer to every [data-inviewport] element:
document.querySelectorAll('[data-inviewport]').forEach((el) => {
  Obs.observe(el, obsOptions);
});

CSS 애니메이션 예

다음은 요소에 애니메이션을 적용하는 방법에 대한 예입니다.

[data-inviewport] { /* THIS DEMO ONLY */
  width:100px; height:100px; background:#0bf; margin: 150vh 0; 
}

/* inViewport */

[data-inviewport="scale-in"] { 
  transition: 2s;
  transform: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
  transform: scale(1);
}

[data-inviewport="fade-rotate"] { 
  transition: 2s;
  opacity: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
  transform: rotate(180deg);
  opacity: 1;
}

결론

이제 IntersectionObserver API를 활용하여 애니메이션의 타이밍을 제어하여 해당 요소가 뷰포트에 표시될 때 애니메이션이 재생되도록 할 수 있습니다. 이 접근 방식은 사용자가 웹페이지를 스크롤할 때 원활하고 매력적인 경험을 제공합니다.

위 내용은 페이지 스크롤 시 뷰포트에 들어갈 때만 요소에 애니메이션을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!