Heim >Web-Frontend >CSS-Tutorial >Wie kann ich CSS-Animationen mit JavaScript beim Scrollen ohne jQuery auslösen?
Wie kann ich CSS-Animationen mit JavaScript beim Scrollen ohne jQuery auslösen?
- Barbara StreisandOriginal
- 2024-12-10 22:41:10533Durchsuche
CSS-Animationen in JavaScript ohne jQuery auslösen
Problem:
Sie möchten eine CSS-Animation auslösen, wenn der Benutzer scrollt die Seite, aber ohne zu verwenden jQuery.
Lösung:
Eine Möglichkeit, CSS-Animationen in JavaScript auszulösen, ist die Verwendung der classList-Eigenschaft. So können Sie es machen:
-
Erstellen Sie eine CSS-Klasse mit den Animationseigenschaften.
Zum Beispiel:
.animated { animation: my-animation 2s forwards; } -
Fügen Sie einen Ereignis-Listener hinzu Dokument.
Das Scroll-Ereignis wird immer dann ausgelöst, wenn der Benutzer auf der Seite scrollt. Mit diesem Ereignis können Sie Ihre Animation auslösen. So geht's:
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'); }); -
Entfernen Sie die Klasse „animiert“, wenn die Animation abgeschlossen ist.
Sie können das Animationend-Ereignis zur Erkennung verwenden wenn die Animation beendet ist. So geht's:
element.addEventListener('animationend', (event) => { // Remove the 'animated' class from the element. element.classList.remove('animated'); });
Beispiel:
Hier ist ein vollständiges Beispiel dafür, wie eine CSS-Animation ausgelöst wird, wenn der Benutzer auf der Seite scrollt:
<!DOCTYPE html>
<html>
<head>
<style>
.animated {
animation: my-animation 2s forwards;
}
@keyframes my-animation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
</style>
</head>
<body>
<div>Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Animationen mit JavaScript beim Scrollen ohne jQuery auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!