Erstellen Sie Ihre eigene Seite mit Scroll-Effekten mit Roll.js

Im Internet finden Sie Dutzende von Scrollbibliotheken. Die meisten sind in JavaScript geschrieben und haben ihre eigenen Effekte, die Sie für Layouts einzelner Seiten, On-Scroll-Animationen und vieles mehr anpassen können.

Aber was ist mit eigene Scrolleffekte kodieren? Oder wie wäre es, wenn Sie einfach nachvollziehen möchten, wie weit die Seite eines Benutzers gescrollt wurde?

Roll.js ist die Bibliothek, nach der Sie suchen. Diese Open Source Script ist verrückt klein und super einfach zu bedienen. Sie können dies mit ein paar JavaScript-Zeilen zum Laufen bringen. Und das Beste: Es zwingt Sie nicht, etwas Bestimmtes auszuführen, sondern eher gibt dir die Werkzeuge Erstellen Sie Ihre eigenen benutzerdefinierten Bildlauffunktionen.

Ziel dieser Bibliothek ist es, Entwicklern dabei zu helfen, ihre Bildlaufeffekte ohne großen Aufwand zu strukturieren.

Wenn Sie einen Blick auf das GitHub-Repo werfen, finden Sie eine vollständige Installationsanleitung mit einigen Beispielschnipseln. Sie können Funktionen ausführen, um aufzurufen, wie weit der Benutzer blättert, oder anders “Scheiben” auf der Seite.

Diese funktionieren am besten für Einzelseitenlayouts, aber Sie können Roll.js für so viel nutzen.

Mit einem einzigen Funktionsaufruf können Sie Daten mit jedem Bildlauf abrufen, der Folgendes umfasst:

Gesamte Seitenschritte (falls zutreffend).
Gesamt% gescrollt Seite.
Aktuelle Position auf der Seite in Pixel.
Gesamte Ansichtsfensterhöhe basierend auf der Gerätegröße.

Dies funktioniert auch mit Sprunglinks, die Benutzer zu bestimmten Teilen der Seite führen (oder nach oben).

Viele dieser Funktionen finden Sie jedoch auch in anderen Bibliotheken. Was macht Roll.js so besonders??

Ein Teil davon ist die Syntax, aber der Verkaufsschlager ist die gesamte Bibliotheksgröße von 8 KB wenn abgebaut Das ist verdammt klein für solch eine detaillierte Scrolling-Bibliothek!

Sie können sehen, wie das auf der Hauptdemoseite funktioniert und Sie können sogar Laden Sie den Roll.js-Quellcode herunter, um sich selbst in diese Demos einzuarbeiten.

Alles aus den Live-Demos und den rohen Bibliotheksdateien kann von GitHub abgerufen werden und ist sehr einfach zu handhaben.

Wenn Sie jedoch Fragen oder Anregungen haben oder Ihren Dank für die großartige Bibliothek mitteilen möchten, können Sie eine Nachricht an den Ersteller @williamngan senden.