Glattes ganzseitiges Scrollen mit dem jQuery Plugin viewScroller.js

JavaScript-Scrolleffekte Seit Jahren gibt es Dutzende großartiger Bibliotheken zur Auswahl. Aber ein neuer Anwärter im Feld ist viewScroller.js.

Diese sehr kleine, aber leistungsfähige Bibliothek kann erstellt werden einseitige Layouts Das Scrollen Sie als Blöcke mit einem Wischen mit dem Scrollrad (oder dem Touchpad). Dadurch wird ein kontrolliertes Layout erstellt, in dem der Benutzer mit Bildlauf durch einzelne Abschnitte einer Seite geführt wird pixelgenaue Präzision.

Natürlich ist dies eine völlig freie Bibliothek verfügbar auf GitHub und einfach zu installieren mit Bower oder npm.

ViewScroller.js ist jedoch nicht eine unabhängige JavaScript-Bibliothek. Es ist auf jQuery und zwei spezifische Plugins angewiesen: jQuery-Mausrad und jQuery Erleichterung. Diese sind beide sind erforderlich Damit die Scroll-Effekte richtig funktionieren.

Dies kann den Wert von viewScroller beeinträchtigen, da nur ein paar JS-Bibliotheken erforderlich sind. Wenn Sie jQuery aber trotzdem verwenden, ist dies ein Kinderspiel. viewScroller.js bietet die einfachste Methode, um eine Web-App für einzelne Seiten läuft ohne viel Code.

Aber es tut, Verwenden Sie sehr detaillierte Klassen und IDs um den Bildlaufeffekt zu erzeugen. Sie können Bearbeiten Sie diese Klassen in Ihrer eigenen CSS-Datei oder überschreibe sie im Basiscode. Sie finden ein volle Liste auf der Repo-Seite mit Klassennamen und Standardeinstellungsdaten.

Der einfachste Weg, um anzufangen, ist vorbei Klonen der ViewScroller-Demos. Sie haben eine mit einer rechten Seitenleiste, eine andere mit einer linken Seitenleiste und eine mit zwei Seitenleisten, deren Inhalt in der Mitte liegt.

Wenn Sie mit einer jQuery-betriebenen Web-App einverstanden sind, ist viewScroller eine fantastische kostenlose Bibliothek. Es braucht einige Abhängigkeiten aber sie sollten nicht schwer zu konfigurieren sein.

Werfen Sie einen Blick auf die Live-Demo und sehen, was Sie denken. Wenn Ihnen die UX und das Scrollverhalten gefallen, folgen Sie der Setup-Anleitung auf GitHub anfangen.