JavaScript implementiert eine Seiten-Scrolling-Animation

Beim Erstellen von Front-End-UI-Effekten ist es ein sehr beliebtes Design, Elemente entsprechend der Scrollposition zu animieren. Normalerweise verwenden wir dazu Plugins oder Bibliotheken von Drittanbietern. In diesem Tutorial zeige ich Ihnen, wie Sie dies mit reinem JavaScript und CSS machen.

Sehen Sie sich zunächst die Wirkung in einer Vorschau an:

Wir verwenden CSS zur Implementierung der Animation und JavaScript zum Auslösen der erforderlichen Stile. Lassen Sie uns zuerst das Layout erstellen.

Erstellen eines Layouts

Wir erstellen zunächst mittels HTML das Seitenlayout und weisen dann den zu animierenden Elementen einen gemeinsamen Klassennamen zu. Das nachfolgende JavaScript lokalisiert diese Elemente über diesen Klassennamen. Hier weisen wir dem Element, das durch Scrollen animiert werden soll, den Klassennamen js-scroll zu. Der HTML-Code lautet wie folgt:

<Abschnitt Klasse="Scroll-Container">
  <div Klasse = "Scroll-Element js-scroll"></div>
  <div class="scroll-caption">Diese Animation wird von oben eingeblendet.</div>
</Abschnitt>

CSS-Stile hinzufügen

Beginnen wir mit einem einfachen Einblend-Animationseffekt:

.js-scroll {
  Deckkraft: 0;
  Übergang: Deckkraft 500 ms;
}

.js-scroll.scrolled {
  Deckkraft: 1;
}

Alle JS-Scroll-Elemente auf der Seite werden ausgeblendet und haben eine Deckkraft von 0. Wenn Sie zu diesem Elementbereich scrollen, fügen Sie den Klassennamen .scrolled hinzu, um ihn sichtbar zu machen.

Elemente mit JavaScript bearbeiten

Nachdem das Layout und die Stile eingerichtet sind, müssen wir nun eine JavaScript-Funktion schreiben, die den Elementen beim Scrollen in die Ansicht die Klassennamen zuweist.

Lassen Sie uns die Logik einfach aufschlüsseln:

1. Holen Sie sich alle JS-Scroll-Elemente auf der Seite
2. Diese Elemente standardmäßig ausblenden
3. Überprüfen, ob sich ein Element im Ansichtsfenster befindet
4. Wenn sich das Element innerhalb des Ansichtsfensters befindet, wird ihm der gescrollte Klassenname zugewiesen
   

Holen Sie sich das Zielelement

Um alle JS-Scroll-Elemente auf der Seite abzurufen, verwenden Sie document.querySelectorAll():

const scrollElements = document.querySelectorAll('.js-scroll')

Standardmäßig alle Zielelemente ausblenden

Iterieren Sie über diese Elemente und blenden Sie sie alle aus dem Blickfeld aus:

scrollElements.forEach((el) => {
  el.style.opacity = 0
})

Überprüfen, ob sich ein Element im Ansichtsfenster befindet

Ob sich ein Element im Ansichtsfenster des Benutzers befindet, können wir erkennen, indem wir bestimmen, ob der Abstand des Elements zum oberen Seitenrand geringer ist als die Höhe des sichtbaren Seitenteils.

In JavaScript verwenden wir getBoundingClientRect().top um den Abstand zwischen dem Element und dem oberen Seitenrand zu ermitteln, und verwenden window.innerHeight oder document.documentElement.clientHeight , um die Höhe des Fensters zu ermitteln.

Wir erstellen eine elementInView -Funktion mit der obigen Logik:

const elementInView = (el) => {
  const elementTop = el.getBoundingClientRect().top

  zurückkehren (
    elementTop <= (Fenster.innereHöhe || Dokument.Dokumentelement.Clienthöhe)
  )
}

Wir könnten diese Funktion ändern, um zu erkennen, ob das Element x Pixel in die Seite hinein gescrollt hat, oder um den Prozentsatz der gescrollten Seite zu erkennen.

const elementInView = (el, scrollOffset = 0) => {
  const elementTop = el.getBoundingClientRect().top

  zurückkehren (
    elementTop <=
    (Fenster.innereHöhe || Dokument.Dokumentelement.ClientHöhe) – ScrollOffset
  )
}

In diesem Fall gibt die Funktion „true“ zurück, wenn das Element um den Betrag von scrollOffset in die Seite hinein gescrollt wurde. Nehmen wir eine kleine Änderung vor und ändern den Parameter scrollOffset in einen Prozentsatz:

const elementInView = (el, percentageScroll = 100) => {
  const elementTop = el.getBoundingClientRect().top

  zurückkehren (
    elementTop <=
    (Fenster.innereHöhe || Dokument.Dokumentelement.Clienthöhe) *
      (ProzentsatzScroll / 100)
  )
}

Dieser Teil kann die Logik entsprechend Ihren spezifischen Anforderungen definieren.

Hinweis: Sie können die Intersection Observer API[2] verwenden, um den gleichen Effekt zu erzielen, allerdings wird der Internet Explorer nicht unterstützt.

Hinzufügen von Klassennamen zu Elementen

Da wir nun erkennen können, ob ein Element in die Seite hineingescrollt wurde, müssen wir eine Funktion definieren, die die Anzeige des Elements steuert. In diesem Fall zeigen wir das Element an, indem wir ihm den gescrollten Klassennamen zuweisen.

const displayScrollElement = (element) => {
  element.classList.add('gescrollt')
}

Anschließend kombinieren wir unsere vorherige Logik mit der Funktion displayScrollElement und rufen sie mit der Methode forEach für alle js-scroll-Elemente auf.

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    wenn (elementInView(el, 100)) {
      AnzeigeScrollElement(el)
    }
  })
}

Wenn das Element nicht mehr angezeigt wird, muss es außerdem auf seinen Standardzustand zurückgesetzt werden. Dies können wir durch die Definition eines hideScrollElements tun:

const hideScrollElement = (Element) => {
  element.classList.remove("gescrollt");
};

const handleScrollAnimation = () => {
  scrollElements.forEach((el) => {
    wenn (elementInView(el, 100)) {
      displayScrollElement(el);
    } anders {
      hideScrollElement(el);
    }
  }

Abschließend übergeben wir die obige Methode an den Scroll-Ereignis-Listener des Fensters, sodass sie immer ausgeführt wird, wenn der Benutzer einen Bildlauf durchführt.

window.addEventListener('scroll', () => {
  handleScrollAnimation()
})

Wir haben alle Funktionen der Scroll-Animation implementiert.

Vollständiges Beispiel

Bitte gehen Sie zum Anfang des Artikels zurück und schauen Sie sich die Renderings an. Sehen Sie, diese Elemente werden mit unterschiedlichen Animationen angezeigt. Dies wird durch die Zuweisung unterschiedlicher CSS-Animationen zu Klassennamen erreicht. Das HTML für dieses Beispiel lautet:

<Abschnitt Klasse="Scroll-Container">
  <div Klasse = "scroll-element js-scroll fade-in"></div>
  <div class="scroll-caption">Einblendeffekt</div>
</Abschnitt>
<Abschnitt Klasse="Scroll-Container">
  <div Klasse = "scroll-element js-scroll fade-in-bottom"></div>
  <div class="scroll-caption">Nach oben schneiden-Effekt</div>
</Abschnitt>
<Abschnitt Klasse="Scroll-Container">
  <div Klasse = "Scroll-Element js-scroll Folie nach links"></div>
  <div class="scroll-caption">Von links einschneiden</div>
</Abschnitt>
<Abschnitt Klasse="Scroll-Container">
  <div Klasse = "Scrollelement js-scroll Folie nach rechts"></div>
  <div class="scroll-caption">Von rechts einschneiden</div>
</Abschnitt>

Hier weisen wir Elementen mit unterschiedlichen Animationseffekten unterschiedliche CSS-Klassennamen zu. Hier sind die CSS-Codes, die diesen Klassen entsprechen:

.gescrollt.einblenden {
  Animation: Einblenden 1 s, langsames Ein- und Ausblenden, beides;
}

.gescrollt.einblenden-unten {
  Animation: Einblenden unten 1 s, langsam ein- und ausblenden, beides;
}

.gescrollt.nach links schieben {
  Animation: 1 Sekunde nach links hineingleiten, beides langsam hinein-heraus;
}

.gescrollt.nach rechts schieben {
  Animation: 1 Sekunde nach rechts hineinschieben, beides mühelos hinein-herausschieben;
}

@keyframes nach links einschieben {
  0% {
    transformieren: übersetzenX(-100px);
    Deckkraft: 0;
  }
  100 % {
    transformieren: übersetzenX(0);
    Deckkraft: 1;
  }
}

@keyframes nach rechts einschieben {
  0% {
    transformieren: übersetzenX(100px);
    Deckkraft: 0;
  }
  100 % {
    transformieren: übersetzenX(0);
    Deckkraft: 1;
  }
}

@keyframes fade-in-bottom {
  0% {
    transformieren: übersetzenY(50px);
    Deckkraft: 0;
  }
  100 % {
    transformieren: übersetzenY(0);
    Deckkraft: 1;
  }
}

@keyframes einblenden {
  0% {
    Deckkraft: 0;
  }
  100 % {
    Deckkraft: 1;
  }
}

Obwohl verschiedene Animationselemente hinzugefügt wurden, müssen wir den JavaScript-Code nicht ändern, da die Logik dieselbe bleibt. Dadurch können wir unserer Seite beliebig viele verschiedene Animationen hinzufügen, ohne neue Funktionen schreiben zu müssen.

Leistungssteigerung durch Drosselklappen

Immer wenn wir eine Funktion im Scroll-Listener binden, wird diese Funktion jedes Mal aufgerufen, wenn der Benutzer die Seite scrollt. Wenn Sie eine Seite 500 Pixel weit scrollen, wird eine Funktion mindestens 50 Mal aufgerufen. Wenn wir versuchen, viele Elemente auf einer Seite unterzubringen, kann dies dazu führen, dass unsere Seite merklich langsamer wird.

Wir können die Anzahl der Funktionsaufrufe reduzieren, indem wir die „Throttle-Funktion“ verwenden. Eine Drosselungsfunktion ist eine Funktion höherer Ordnung, die die übergebene Funktion nur einmal innerhalb eines angegebenen Intervalls aufruft.

Dies ist insbesondere bei Scroll-Ereignissen nützlich, da wir nicht jedes Pixel erkennen müssen, das der Benutzer scrollt. Wenn wir beispielsweise eine Drosselfunktion mit einem Timer von 100 ms haben, wird die Funktion nur einmal pro 100 ms aufgerufen, die der Benutzer scrollt.

Die Drosselungsfunktion kann in JavaScript wie folgt implementiert werden:

let throttleTimer = false

const throttle = (Rückruf, Zeit) => {
  wenn (ThrottleTimer) return

  //Hier markieren, damit die Funktion nicht wiederholt ausgeführt wird throttleTimer = true

  setzeTimeout(() => {
    // Wenn die angegebene Zeit erreicht ist, rufe die übergebene Rückruffunktion callback() auf.
    throttleTimer = false
  }, Zeit)
}

Dann können wir den Scroll-Ereignis-Listener für das Fensterobjekt ändern:

window.addEventListener('scroll', () => {
  Drosselung (HandleScrollAnimation, 250)
})

Jetzt wird unsere Funktion handleScrollAnimation alle 250 ms aufgerufen, wenn der Benutzer scrollt:

Oben finden Sie Einzelheiten zur Implementierung einer Seiten-Scroll-Animation mit JavaScript. Weitere Informationen zum Seiten-Scrolling in JavaScript finden Sie in den anderen verwandten Artikeln auf 123WORDPRESS.COM!