CSS3 및 IntersectionObserver API를 사용하여 뷰포트에 있는 요소에만 애니메이션을 적용하려면 어떻게 해야 합니까?

뷰포트의 요소 애니메이션

CSS3에서는 HTML 요소에 애니메이션을 추가하여 특정 조건이 충족될 때 HTML 요소를 움직이거나 모양을 변경할 수 있습니다. . 그러나 요소가 뷰포트에 표시될 때만 이러한 애니메이션이 재생되도록 하려면 IntersectionObserver API를 사용할 수 있습니다.

IntersectionObserver API 사용

IntersectionObserver API 뷰포트 또는 상위 요소와 요소의 교차를 관찰할 수 있습니다. 요소가 표시되면(예: 뷰포트와 교차) 클래스 전환이나 애니메이션 실행과 같은 작업을 트리거할 수 있습니다.

다음은 IntersectionObserver를 사용한 구현 예입니다.

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);
});

inViewport 함수에서 요소가 뷰포트와 교차하는지(예: Entry.isIntersecting) 확인하고 대상 요소의 is-inViewport 클래스입니다.

애니메이션 스타일을 지정하려면 평소처럼 CSS 전환이나 키프레임을 사용할 수 있습니다. 예를 들어 다음과 같이 data-inviewport="scale-in"을 사용하여 요소에 대한 애니메이션을 정의할 수 있습니다.

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

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

이 설정을 사용하면 요소가 10%에서 100%로 확장됩니다. 뷰포트에 표시됩니다.

위 내용은 CSS3 및 IntersectionObserver API를 사용하여 뷰포트에 있는 요소에만 애니메이션을 적용하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!