So erstellen Sie eine von Scroll ausgelöste Animation mit Basic JavaScript

Die clevere Verwendung von Webanimationen kann die Benutzererfahrung verbessern und die Website der Website verbessern. Wenn sich das Animationselement jedoch unterhalb der Seite befindet, kann der Benutzer es vermissen. In diesem Artikel wird vorgestellt, wie native JavaScript verwendet wird, um scroll-ausgelöste Animationen zu implementieren, sodass die Animation nur dann abspielt, wenn der Benutzer zu einem bestimmten Element scrollt, die Verschwendung von Ressourcen vermeidet und die Benutzererfahrung verbessert.

Wir müssen uns nicht auf Bibliotheken von Drittanbietern verlassen, sondern mit nur einer kleinen Menge nativem JavaScript-Code erreichen. Der Kern liegt in der Verwendung der Schnittstelle der Observer -API , die effizient erkennen kann, ob das Zielelement in das Fenster eingeht.

Implementieren von Scroll -Trigger -Ereignissen

Unser Ansatz umfasst:

1. Erstellen Sie die scrollTrigger -Funktion, um Scroll -Triggerereignisse für bestimmte Elemente zu verarbeiten.
2. Wenn das Element in das Fenster eingeht, fügen Sie die .active Klasse hinzu.
3. Verwenden Sie CSS .active Klasse.

Darüber hinaus müssen wir benutzerdefinierte Rückruffunktionen unterstützen, um bestimmte Aktionen auszuführen, wenn Elemente sichtbar sind, z. B.:

 Scrolltrigger ('. Loader', {
  CB: Funktion (el) {
    El.Innertext = 'Laden ...'
    loadcontent ()
  }
})

Schließlich werden wir uns auch mit der Nichtunterstützung der Schnittpassungs-API älterer Browser befassen.

Kreuzung Observer API

Mit der Schnittbeobachter -API können wir den Schnittstellenzustand des Zielelements und des Fensters asynchron beobachten, was effizienter ist als das Anhören auf Scrollenereignisse.

Erstellen Sie eine Scroll -Triggerfunktion

Erstellen Sie zunächst eine scrollTrigger -Funktion, die den Selektor als Parameter empfängt:

 Funktion Scrolltrigger (Selector) {
  let els = document.querySelectorAll (Selector);
  els = array.from (els);
  elsach (el => {
    Addobserver (EL);
  });
}
// Beispiele scrolltrigger ('. Scroll-reveal');

Erstellen Sie als Nächstes die addObserver -Funktion und verwenden Sie Intersection Observer, um auf Elemente zu hören:

 Funktion Scrolltrigger (Selector) {
  let els = document.querySelectorAll (Selector);
  els = array.from (els);
  elsach (el => {
    Addobserver (EL);
  });
}
Funktion Addobserver (el) {
    Lassen Sie Observer = New IntersectionObserver ((Einträge, Beobachter) => {
      Einträge.foreach (Eintrag => {
        if (Eintrag. Issintersecting) {
          Eintrag.Target.ClassList.add ('Active');
          Observer.unobserve (Eintrag.Target);
        }
      });
    });
  Observer.observe (el);
}
// Beispiele scrolltrigger ('. Scroll-reveal');

Der obige Code fügt .active Klassen hinzu, wenn der Elementteil sichtbar ist. Für eine weitere feine Steuerung können wir options des Intersection -Beobachters verwenden:

 Funktion Scrolltrigger (Selector, Optionen = {}) {
  let els = document.querySelectorAll (Selector);
  els = array.from (els);
  elsach (el => {
    Addobserver (El, Optionen);
  });
}
Funktion Addobserver (El, Optionen) {
  Lassen Sie Observer = New IntersectionObserver ((Einträge, Beobachter) => {
    Einträge.foreach (Eintrag => {
      if (Eintrag. Issintersecting) {
        Eintrag.Target.ClassList.add ('Active');
        Observer.unobserve (Eintrag.Target);
      }
    });
  }, Optionen);
  Observer.observe (el);
}
// Beispiel für Scrolltrigger ('. Scroll-Reveal', {
  rootmargin: '-200px' '
});

Jetzt haben wir die ersten beiden Ziele erreicht. Als nächstes fügen Sie die Rückruffunktion Unterstützung hinzu:

 Funktion Scrolltrigger (Selector, Optionen = {}) {
  let els = document.querySelectorAll (Selector);
  els = array.from (els);
  elsach (el => {
    Addobserver (El, Optionen);
  });
}
Funktion Addobserver (El, Optionen) {
  Lassen Sie Observer = New IntersectionObserver ((Einträge, Beobachter) => {
    Einträge.foreach (Eintrag => {
      if (Eintrag. Issintersecting) {
        if (options.cb) {
          Optionen.CB (EL);
        } anders{
          Eintrag.Target.ClassList.add ('Active');
        }
        Observer.unobserve (Eintrag.Target);
      }
    });
  }, Optionen);
  Observer.observe (el);
}
// Beispiel für Scrolltrigger ('. Loader', {
  rootmargin: '-200px',
  CB: Funktion (el) {
    El.InNerText = 'Laden ...';
    setTimeout (() => {
      El.Innertext = 'Aufgabe abgeschlossen! ';
    }, 1000);
  }
});

Bearbeiten Sie schließlich die Kompatibilität des Legacy -Browsers:

 Funktion Scrolltrigger (Selector, Optionen = {}) {
  let els = document.querySelectorAll (Selector);
  els = array.from (els);
  elsach (el => {
    Addobserver (El, Optionen);
  });
}
Funktion Addobserver (El, Optionen) {
  if (! ('intersectionObserver' im Fenster)) {
    if (options.cb) {
      Optionen.CB (EL);
    } anders{
      EL.ClASSLIST.ADD ('Active');
    }
    zurückkehren;
  }
  Lassen Sie Observer = New IntersectionObserver ((Einträge, Beobachter) => {
    Einträge.foreach (Eintrag => {
      if (Eintrag. Issintersecting) {
        if (options.cb) {
          Optionen.CB (EL);
        } anders{
          Eintrag.Target.ClassList.add ('Active');
        }
        Observer.unobserve (Eintrag.Target);
      }
    });
  }, Optionen);
  Observer.observe (el);
}
// Beispiel scrolltrigger ('. Intro-text');
Scrolltrigger ('. Scroll-Reveal', {
  rootmargin: '-200px',
});
Scrolltrigger ('. Loader', {
  rootmargin: '-200px',
  CB: Funktion (el) {
    El.InNerText = 'Laden ...';
    setTimeout (() => {
      El.Innertext = 'Aufgabe abgeschlossen! ';
    }, 1000);
  }
});

In den oben genannten Schritten haben wir erfolgreich scrollgesteuerte Animationseffekte erreicht und die Browserkompatibilität berücksichtigt. Ich hoffe, dieser Artikel kann Ihnen helfen, die Benutzererfahrung Ihrer Website zu verbessern.

Das obige ist der detaillierte Inhalt vonSo erstellen Sie eine von Scroll ausgelöste Animation mit Basic JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!