스크롤 시 JavaScript를 사용하여 CSS 애니메이션을 어떻게 트리거할 수 있나요?

JavaScript에서 CSS 애니메이션 트리거

jQuery가 없는 경우 JavaScript를 통해 CSS 애니메이션을 트리거하는 것이 실행 가능한 옵션입니다. 이 가이드에서는 사용자가 페이지를 스크롤할 때 이를 달성하기 위한 간결한 방법을 제공합니다.

클래스 조작으로 CSS 애니메이션 트리거

CSS 애니메이션을 트리거하는 가장 간단한 접근 방식은 다음을 수정하는 것입니다. 클래스가 존재하면 그 안에 정의된 스타일이 적용될 수 있습니다. 순수 JavaScript로 이를 수행하려면:

function addClass(element, className) {
  element.classList.add(className);
}

function removeClass(element, className) {
  element.classList.remove(className);
}

제공된 예에는 이미 정의된 애니메이션용 CSS 클래스인 "anim" 및 "anim2"가 있습니다. 각 요소에 다음 클래스를 추가하여 애니메이션을 시작할 수 있습니다.

function start() {
  addClass(document.getElementById('logo'), 'anim');
  addClass(document.getElementById('earthlogo'), 'anim2');
}

페이지 스크롤에서 애니메이션 트리거

마지막으로 페이지가 스크롤될 때 애니메이션을 시작하려면 스크롤하면 "window.addEventListener" 기능을 활용할 수 있습니다.

window.addEventListener('scroll', start);

이렇게 하면 "시작"이 호출됩니다. 기능은 페이지가 스크롤될 때마다 CSS 애니메이션을 트리거합니다.

추가 참고

키프레임을 사용하여 CSS에 정의된 애니메이션은 클래스를 추가하거나 제거하여 유사하게 트리거될 수 있습니다. 그러나 문제의 요소에 애니메이션이 적용되도록 정의된 전환 속성이 ​​있는지 확인하는 것이 중요합니다.

위 내용은 스크롤 시 JavaScript를 사용하여 CSS 애니메이션을 어떻게 트리거할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!