Wie kann ich CSS-Animationen mit JavaScript beim Scrollen auslösen?

CSS-Animationen in JavaScript auslösen

Ohne jQuery ist das Auslösen von CSS-Animationen über JavaScript eine praktikable Option. Diese Anleitung bietet eine prägnante Methode, um dies zu erreichen, wenn der Benutzer durch die Seite scrollt.

CSS-Animation mit Klassenmanipulation auslösen

Der einfachste Ansatz zum Auslösen von CSS-Animationen ist das Ändern das Vorhandensein einer Klasse, sodass die darin definierten Stile wirksam werden können. Um dies mit reinem JavaScript zu erreichen:

function addClass(element, className) {
  element.classList.add(className);
}

function removeClass(element, className) {
  element.classList.remove(className);
}

In Ihrem bereitgestellten Beispiel sind CSS-Klassen für Animationen bereits definiert: „anim“ und „anim2“. Sie können die Animation starten, indem Sie diese Klassen zu den jeweiligen Elementen hinzufügen:

function start() {
  addClass(document.getElementById('logo'), 'anim');
  addClass(document.getElementById('earthlogo'), 'anim2');
}

Animation beim Scrollen der Seite auslösen

Zuletzt, um die Animation zu starten, wenn die Seite geöffnet ist Wenn Sie gescrollt haben, können Sie die Funktion „window.addEventListener“ verwenden:

window.addEventListener('scroll', start);

Dadurch wird Ihre „Start“-Funktion immer dann aufgerufen, wenn die Seite aufgerufen wird wird gescrollt, wodurch die CSS-Animationen ausgelöst werden.

Zusätzlicher Hinweis

In CSS mithilfe von Keyframes definierte Animationen können auf ähnliche Weise durch Hinzufügen oder Entfernen von Klassen ausgelöst werden. Es muss jedoch unbedingt sichergestellt werden, dass das betreffende Element über eine definierte Übergangseigenschaft verfügt, damit die Animation wirksam werden kann.

Das obige ist der detaillierte Inhalt vonWie kann ich CSS-Animationen mit JavaScript beim Scrollen auslösen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!