Comment puis-je déclencher des animations CSS avec JavaScript sur Scroll sans jQuery ?-tutoriel CSS-php.cn

Comment puis-je déclencher des animations CSS avec JavaScript sur Scroll sans jQuery ?

Barbara Streisand

Libérer： 2024-12-10 22:41:10

original

482 Les gens l'ont consulté

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

Déclencher des animations CSS en JavaScript sans jQuery

Problème :

Vous souhaitez déclencher une animation CSS lorsque l'utilisateur fait défiler la page mais sans utiliser jQuery.

Solution :

Une façon de déclencher des animations CSS en JavaScript consiste à utiliser la propriété classList. Voici comment procéder :

Créez une classe CSS avec les propriétés d'animation.

Par exemple :
```
.animated {
  animation: my-animation 2s forwards;
}
```
Copier après la connexion
Ajouter un écouteur d'événement au document.

L'événement scroll est déclenché chaque fois que l'utilisateur fait défiler la page. Vous pouvez utiliser cet événement pour déclencher votre animation. Voici comment :
```
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');
});
```
Copier après la connexion
Supprimez la classe « animée » lorsque l'animation est terminée.

Vous pouvez utiliser l'événement animationend pour détecter lorsque l'animation est terminée. Voici comment :
```
element.addEventListener('animationend', (event) => {
  // Remove the 'animated' class from the element.
  element.classList.remove('animated');
});
```
Copier après la connexion

Exemple :

Voici un exemple complet de la façon de déclencher une animation CSS lorsque l'utilisateur fait défiler la 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>

Copier après la connexion

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!