Home >Web Front-end >CSS Tutorial >How Can I Trigger CSS Animations with JavaScript on Scroll Without jQuery?
How Can I Trigger CSS Animations with JavaScript on Scroll Without jQuery?
- Barbara StreisandOriginal
- 2024-12-10 22:41:10483browse
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; } -
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'); }); -
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'); });
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>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!