jQuery 없이 스크롤 시 JavaScript로 CSS 애니메이션을 트리거하려면 어떻게 해야 합니까?

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

문제:

사용자가 스크롤할 때 CSS 애니메이션을 트리거하려고 합니다. 페이지를 사용하지 않고 jQuery.

해결책:

JavaScript에서 CSS 애니메이션을 트리거하는 한 가지 방법은 classList 속성을 사용하는 것입니다. 이를 수행하는 방법은 다음과 같습니다.

1. 애니메이션 속성을 사용하여 CSS 클래스를 만듭니다.

   예:

   .animated {
     animation: my-animation 2s forwards;
   }

2. 이벤트 리스너를 document.

   사용자가 페이지를 스크롤할 때마다 스크롤 이벤트가 시작됩니다. 이 이벤트를 사용하여 애니메이션을 트리거할 수 있습니다. 방법은 다음과 같습니다.

   document.addEventListener('scroll', (event) => {
     // Get the element you want to animate.
     const element = document.getElementById('my-element');
   
     // Add the 'animated' class to the element.
     element.classList.add('animated');
   });

3. 애니메이션이 완료되면 'animated' 클래스를 제거합니다.

   animationend 이벤트를 사용하여 감지할 수 있습니다. 애니메이션이 끝났을 때. 방법은 다음과 같습니다.

   element.addEventListener('animationend', (event) => {
     // Remove the 'animated' class from the element.
     element.classList.remove('animated');
   });

예:

다음은 사용자가 페이지를 스크롤할 때 CSS 애니메이션을 트리거하는 방법에 대한 전체 예입니다.

  <style>
    .animated {
      animation: my-animation 2s forwards;
    }

    @keyframes my-animation {
      0% {
        opacity: 0;
      }

      100% {
        opacity: 1;
      }
    }
  </style>


  <div></div>

위 내용은 jQuery 없이 스크롤 시 JavaScript로 CSS 애니메이션을 트리거하려면 어떻게 해야 합니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!