요소가 뷰포트에 있을 때만 애니메이션을 적용하는 방법은 무엇입니까?

페이지 스크롤을 사용하여 뷰포트에서 요소 애니메이션

Q: 스크롤하는 동안 요소가 뷰포트에 표시되는 경우에만 웹페이지에 애니메이션을 표시하려면 어떻게 해야 합니까?

A: 이를 달성하려면 IntersectionObserver API를 활용할 수 있습니다.

Intersection Observer API

Intersection Observer API를 사용하면 요소와 상위 요소 또는 뷰포트 사이의 교차점을 관찰할 수 있습니다. 이를 통해 요소가 뷰포트 내에 표시되는지 여부에 따라 이벤트를 트리거할 수 있습니다.

다음은 API를 사용하여 애니메이션을 트리거하는 데 사용할 수 있는 클래스를 전환하는 예입니다.

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

const Obs = new IntersectionObserver(inViewport);
const obsOptions = {};

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

그런 다음 "is-inViewport" 클래스를 사용하여 요소에 CSS 전환 또는 애니메이션을 추가하여 요소가 뷰포트에 나타날 때 애니메이션을 적용할 수 있습니다. 예:

[data-inviewport] {
  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;
}

이 코드를 사용하면 [data-inviewport] 속성이 있는 요소에 CSS 전환이 적용됩니다. 뷰포트에 들어가면 is-inViewport 클래스가 추가되어 애니메이션을 트리거합니다.

위 내용은 요소가 뷰포트에 있을 때만 애니메이션을 적용하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!