So verwenden Sie Locomotive Scroll für alle Arten von Scroll- Effekten

Ich suchte kürzlich nach einer Möglichkeit, Scroll-Effekte in einem Projekt zu realisieren und stieß auf die Locomotive Scroll-Bibliothek. Sie ermöglicht eine Vielzahl von Scroll-Effekten, wie Parallax und das Auslösen/Steuern von Animationen an Scroll-Punkten.

Man könnte sie auch als „Smooth Scrolling“-Bibliothek bezeichnen, aber sie nutzt nicht das native Smooth Scrolling – sie macht genau das Gegenteil, indem sie das Scrollen virtualisiert und sicherstellt, dass es immer flüssig ist. Man könnte dies wahrscheinlich als „Scrolljacking“ bezeichnen, also wenn Sie das generell hassen, dann mögen Sie dies vielleicht auch nicht, aber die UX-Forschung ist sich ziemlich uneinig, ob es tatsächlich schlecht ist oder nicht. Die Homepage gibt Ihnen einen guten Eindruck davon, wie es funktioniert und sich anfühlt.

Betrachten wir die Grundlagen der Verwendung von Locomotive-Scroll-JavaScript und wie man es für ansprechende Benutzererlebnisse nutzt.

Was ist Locomotive Scroll?

Hier sagen sie dazu

Locomotive Scroll ist eine einfache Scroll-Bibliothek, die auf ayamflows virtual-scroll aufbaut. Sie bietet sanftes Scrollen mit Unterstützung für Parallax-Effekte, das Umschalten von Klassen und das Auslösen von Event-Listenern, wenn sich Elemente im Viewport befinden.

Mit anderen Worten, sie erkennt, wenn sich Elemente im Viewport befinden, und ändert dann die Werte der CSS-transform-Eigenschaft auf diesen Elementen, um Scroll-Effekte zu erzeugen.

Oft werden Scroll-Effekte als *Parallax* bezeichnet, was bedeutet, dass einige Elemente so aussehen, als befänden sie sich tief im Hintergrund und scheinen sich beim Scrollen langsamer zu bewegen als andere Elemente, die sich näher im Vordergrund befinden. Stellen Sie sich vor, Sie blicken aus dem Fenster eines fahrenden Autos. Die Bäume in der Ferne scheinen langsam vorbeizudriften, während der Zaun direkt an der Straße schnell vorbeirauscht. So ähnlich wie der Effekt hier in diesem Pen von Sarah Drasner

So funktioniert es

Locomotive Scroll arbeitet hauptsächlich über spezifische Attribute im HTML. Elemente mit diesen Attributen lösen Event-Listener in JavaScript aus, wenn sie sich im Viewport befinden, und wenden dann CSS-transform-Werte als Inline-Stile an.

Es gibt zwei wichtige Attribute, auf die man sich bei Locomotive immer verlassen kann

• data-scroll: erkennt, ob sich ein Element im Viewport befindet oder nicht
• data-scroll-container: umschließt *den gesamten* HTML-Inhalt, den Sie auf Scrollen überwachen möchten

Hier sehen Sie, was wir meinen, wenn wir sagen, dass die Werte der transform-Eigenschaft im HTML als Inline-Stile aktualisiert werden.

Lassen Sie uns das einrichten

Wir können die Bibliothek bei Bedarf direkt als <script>-Tag verwenden. Sie ist auf CDNs verfügbar, also so

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.css"> 
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/locomotive-scroll.min.js">

Jetzt suchen wir den Container und starten die Bibliothek

const scroller = new LocomotiveScroll({
  el: document.querySelector('[data-scroll-container]'),
  smooth: true
});

Die Bibliothek ist auch auf npm verfügbar, so dass wir sie stattdessen mit dem üblichen npm install locomotive-scroll in unserem Build verwenden können, und dann

import LocomotiveScroll from 'locomotive-scroll';

const scroll = new LocomotiveScroll();

Das bedeutet, dass wir sie auch von Skypack aus verwenden könnten, so wie

Das ist wirklich alles, was zur Einrichtung gehört! Es ist ziemlich plug-and-play.

Hier sind einige Beispiele

Sie können sich wahrscheinlich einige ziemlich nette Anwendungsfälle für so etwas vorstellen, aber lassen Sie uns ein paar Beispiele durchgehen, wo Sie Locomotive Scroll verwenden könnten.

Beginnen wir mit diesem

Dieses HTML hat alle möglichen data--Attribute. Wir haben uns bereits data-scroll und data-scroll-container angesehen. Hier sind die restlichen und was sie tun:

• data-scroll-section : Definiert einen scrollbaren Abschnitt. Für eine bessere Leistung ist es ratsam, Seiten in Abschnitte zu unterteilen.
• data-scroll-direction: Definiert die vertikale oder horizontale Richtung, in die sich ein Element bewegt.
• data-scroll-speed: Gibt die Geschwindigkeit an, mit der sich ein Element bewegt. Ein negativer Wert kehrt die Richtung um, aber nur vertikal, es sei denn, data-scroll-direction ist auf demselben Element angewendet.
• data-scroll-sticky: Gibt ein Element an, das am Viewport haftet, solange das Ziel-Element noch sichtbar ist.
• data-scroll-target: Zielt auf ein bestimmtes Element ab. Es nimmt einen ID-Selektor auf, der sich im Vergleich zu den anderen Attributen von den anderen Attributen unterscheidet.

Wenn wir also das Attribut data-scroll-sticky verwenden, müssen wir immer auch ein data-scroll-target-Attribut setzen, da das Ziel-Element normalerweise der Container ist, der die anderen Elemente enthält.

<div class="container" id="stick" data-scroll-section >
  <p data-scroll data-scroll-sticky data-scroll-target="#stick">
    Look at me, I'm going to stick when you scroll pass me.
  </p>
</div>

Nachdem wir uns eines angesehen haben, hier sind noch ein paar weitere

Sie können LocoMotive-Scroll auch in anderen Frameworks verwenden. Hier ist ein Beispiel in React

Scroll an Bord!

Ich kann die Leistungsfähigkeit von Locomotive Scroll nicht genug betonen. Ich musste meinem Nebenprojekt Scroll-Effekte hinzufügen, und dies war super schnell und einfach zu bedienen. Ich hoffe, Sie können es auch in einem Projekt verwenden und erleben, wie großartig es für Scroll-Effekte ist.