How Can I Trigger CSS Animations with JavaScript on Scroll Without jQuery?-CSS Tutorial-php.cn

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

Barbara Streisand

Release： 2024-12-10 22:41:10

Original

482 people have browsed it

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

Trigger CSS Animations in JavaScript without jQuery

Problem:

You want to trigger a CSS animation when the user scrolls the page but without using jQuery.

Solution:

One way to trigger CSS animations in JavaScript is by using the classList property. Here's how you can do it:

Create a CSS class with the animation properties.

For example:
```
.animated {
  animation: my-animation 2s forwards;
}
```
Copy after login

Add an event listener to the document.

The scroll event is fired whenever the user scrolls the page. You can use this event to trigger your animation. Here's how:

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');
});

Copy after login

Remove the 'animated' class when the animation is complete.

You can use the animationend event to detect when the animation has finished. Here's how:
```
element.addEventListener('animationend', (event) => {
  // Remove the 'animated' class from the element.
  element.classList.remove('animated');
});
```
Copy after login

Example:

Here's a complete example of how to trigger a CSS animation when the user scrolls the page:

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

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

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

Copy after login

The above is the detailed content of How Can I Trigger CSS Animations with JavaScript on Scroll Without jQuery?. For more information, please follow other related articles on the PHP Chinese website!