페이지 스크롤 중에 요소가 뷰포트에 들어갈 때 CSS 애니메이션을 트리거하는 방법은 무엇입니까?

페이지 스크롤 중 뷰포트에 표시되는 요소 애니메이션

웹 페이지에서 CSS 애니메이션을 사용할 때 모든 애니메이션이 동시에 재생되어 애니메이션이 눈에 띄지 않는 상황에 직면하는 것이 일반적입니다. 바닥. 이 문제를 해결하기 위해 IntersectionObserver API를 사용하는 솔루션을 살펴보겠습니다.

IntersectionObserver API

IntersectionObserver API를 사용하면 개발자는 요소 교차점의 변경 사항을 모니터링할 수 있습니다. 상위 컨테이너 또는 뷰포트입니다. 요소가 표시되면 작업을 시작하는 데 사용할 수 있는 이벤트를 트리거합니다.

구현 예

다음은 다음과 같은 경우 CSS 클래스 토글을 트리거하는 예입니다. 요소가 뷰포트에 표시됩니다:

<br>const inViewport = (항목, 관찰자) => {<br> items.forEach(entry => {</p>
<pre class="brush:php;toolbar:false">entry.target.classList.toggle("is-inViewport", entry.isIntersecting);

});
};

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

// 모든 [data-inviewport] 요소에 관찰자를 연결합니다:
문서 .querySelectorAll('[data-inviewport]').forEach(el => {
Obs.observe(el, obsOptions);
});

위의 예에서는 [data-inviewport] 속성이 있는 모든 요소가 모니터링됩니다. 요소가 뷰에 있으면 is-inViewport 클래스가 추가되고 아래 CSS에 정의된 애니메이션이 실행됩니다.

[data-inviewport="scale-in"] { 
 전환: 2초;
 변환: scale(0.1);
}
[data-inviewport="scale-in"].is-inViewport { 
 변환: scale(1);
}

[data -inviewport="fade-rotate"] { 
 전환: 2초;
 불투명도: 0;
}
[data-inviewport="fade-rotate"].is-inViewport { 
 변환: 회전(180deg);
 불투명도: 1;
}
< ;/pre>
이 솔루션은 스크롤하는 동안 요소가 표시될 때만 애니메이션이 재생되도록 보장하여 사용자 경험을 향상하고 시각적으로 더욱 매력적인 웹페이지를 만듭니다.
위 내용은 페이지 스크롤 중에 요소가 뷰포트에 들어갈 때 CSS 애니메이션을 트리거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!