집 >웹 프론트엔드 >CSS 튜토리얼 >jQuery 없이 스크롤 시 JavaScript로 CSS 애니메이션을 트리거하려면 어떻게 해야 합니까?

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

Barbara Streisand원래의: 2024-12-10 22:41:10482검색

How Can I Trigger CSS Animations with JavaScript on Scroll Without jQuery?

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

문제:

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

해결책:

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

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

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

이벤트 리스너를 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');
});

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

animationend 이벤트를 사용하여 감지할 수 있습니다. 애니메이션이 끝났을 때. 방법은 다음과 같습니다.
```
element.addEventListener('animationend', (event) => {
  // Remove the 'animated' class from the element.
  element.classList.remove('animated');
});
```

예:

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

<!DOCTYPE html>
<html>
<head>
  <style>
    .animated {
      animation: my-animation 2s forwards;
    }

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

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

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

JavaScript jquery css for using class Property Event this animation

성명：

이전 기사：JavaScript에서 요소 오버플로를 효율적으로 감지하려면 어떻게 해야 합니까?다음 기사：JavaScript에서 요소 오버플로를 효율적으로 감지하려면 어떻게 해야 합니까?