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!