Maison >interface Web >tutoriel CSS >Comment puis-je déclencher des animations CSS avec JavaScript sur Scroll sans jQuery ?

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

Barbara Streisandoriginal: 2024-12-10 22:41:10480parcourir

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;
}
```

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

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

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>

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!

JavaScript jquery css for using class Property Event this animation

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Comment puis-je détecter efficacement le débordement d’éléments en JavaScript ?Article suivant：Comment puis-je détecter efficacement le débordement d’éléments en JavaScript ?

Articles Liés

Voir plus