de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Erstellen Sie Ihre eigene Seite Scrollen Effekte mit Roll.js

Sie können Dutzende von Scroll-Bibliotheken im gesamten Web finden. Die meisten sind in JavaScript geschrieben und haben ihre eigenen Effekte, die Sie für einzelne Seitenlayouts, On-Scroll-Animationen und vieles mehr neu gestalten können.

Aber was ist mit der Codierung eigener Scroll-Effekte ? Oder was ist, wenn Sie nur eine einfache Möglichkeit haben möchten, zu verfolgen, wie weit die Seite, auf der ein Benutzer gescrollt hat, ist?

Roll.js ist die Bibliothek, nach der Sie suchen. Dieses Open-Source-Skript ist verrückt klein und super einfach zu bedienen . Sie können dies mit ein paar Zeilen JavaScript erreichen. Und das Beste: Es zwingt Sie nicht dazu, etwas Bestimmtes zu tun, sondern Sie erhalten die Werkzeuge, um Ihre eigenen Scrollfunktionen zu erstellen.

Das Ziel dieser Bibliothek ist es, Entwicklern zu helfen, ihre Scroll-Effekte ohne großen Aufwand zu strukturieren.

Wenn Sie sich das Haupt-GitHub-Repo ansehen, finden Sie einen kompletten Setup-Guide mit einigen Beispiel-Snippets. Sie können Funktionen aufrufen, um zu erfahren, wie weit der Benutzer scrollt, oder zu verschiedenen "Bereichen" auf der Seite.

Diese funktionieren am besten bei einseitigen Layouts, aber Sie können Roll.js für so viel verwenden.

Mit einem einzigen Funktionsaufruf können Sie Daten mit jedem Scroll abrufen, der Folgendes enthält:

  • Gesamtzahl der Seitenschritte (falls zutreffend)
  • Total% scrollte die Seite herunter.
  • Aktuelle Position auf der Seite in Pixel.
  • Gesamte Ansichtsfensterhöhe basierend auf der Gerätegröße

Dies funktioniert auch mit Jump-Links, die Benutzer zu bestimmten Teilen der Seite nach unten (oder oben) bringen.

Aber Sie können viele dieser Funktionen auch in anderen Bibliotheken finden. Was macht Roll.js so besonders?

Ein Teil davon ist die Syntax, aber der große Verkäufer hier ist die Gesamtgröße der Bibliothek von 8 KB bei der Minimierung. Das ist verdammt klein für so eine detaillierte Scroll-Bibliothek!

Sie können sehen, wie dies auf der Hauptdemoseite funktioniert und Sie können sogar den Quellcode von Roll.js herunterladen, um selbst in diese Demos einzutauchen .

Alles von den Live-Demos und den Rohbibliotheksdateien kann von GitHub abgerufen werden und es ist super einfach mit ihnen zu arbeiten.

Aber wenn Sie Fragen oder Anregungen haben oder Ihren Dank für die großartige Bibliothek teilen möchten, können Sie eine Nachricht an den Schöpfer @williamngan senden.

10 einzigartige Spielkarten-Designs, die Sie lieber behalten als spielen

10 einzigartige Spielkarten-Designs, die Sie lieber behalten als spielen

Laut Wikipedia gab es Spielkarten seit über 1100 Jahren. Sie haben sich seither erheblich verändert. Verschiedene Decksvarianten wurden erstellt, doch was wir als "normales Kartenspiel" erkennen, hat sich seit einiger Zeit nicht wesentlich verändert. Zumindest könnten Sie das denken! Es gibt ziemlich viele Firmen, die spezielle Plattformen geschaffen haben, die von sonderbar zu schönem zu nützlichem reichen.Wenn

(Tech- und Design-Tipps)

Multirange-Polyfill-Unterstützung für HTML5-Slider mit zwei Handgriffen

Multirange-Polyfill-Unterstützung für HTML5-Slider mit zwei Handgriffen

Die neuen HTML5-Bereichseingaben sind für Mengen und dynamische Auswahlen wie Daten fantastisch. Der Standardbereichsschieberegler unterstützt jedoch nicht mehrere Griffe .Geben Sie Multirange ein, ein Polyfill, das zur Unterstützung mehrerer ordnungsgemäß funktionierender Handles erstellt wurde und alle gängigen Browser unterstützt.Dies i

(Tech- und Design-Tipps)