Reisen ist eine der grundlegendsten Aufgaben, die wir den Benutzern stellen. Und gemessen an der Anzahl der Bildläufe auf Websites und Apps in diesen Tagen verlangen wir viel.
Das Hinzufügen von scrollbasierten Effekten kann eine großartige Möglichkeit sein, die Benutzererfahrung zu verbessern. Das heißt, solange sie die Fähigkeit zur Navigation durch lange Inhaltsabschnitte nicht beeinträchtigen. Wenn überhaupt, sollten die Effekte die Sache einfacher machen und der Mischung ein wenig Flair verleihen.
Hier ist eine Sammlung von Bildlaufeffekten und Dienstprogrammen, die Ihre Besucher begeistern und (hoffentlich) Ihnen aus dem Weg gehen.
Abschnitt für Abschnitt
Moderne Webseiten sind häufig in mehrere Inhaltsbereiche unterteilt, von denen jeder seine eigenen Elemente aufweist. Dieses praktische Snippet fügt am unteren Bildschirmrand eine Schaltfläche (in verschiedenen Stilen verfügbar) hinzu, mit der Benutzer klicken und zum nächsten Abschnitt scrollen können. Verwenden Sie die CSS-ID zusammen mit jQuery, damit die Navigation funktioniert.
Siehe den Stift
Demo: CSS Scroll Down Button von Naoya
Alle Angaben besagen, dass Sie sich bewegen
Bildlaufanzeigen sind auf inhaltsreichen Websites sehr beliebt geworden. Sie kommunizieren in einer leicht verdaulichen Methode, wie weit ein Benutzer von einer Story entfernt ist. Bonus, dass diese Lösung nur CSS ist.
Siehe den Stift
CSS-Bildlaufanzeige nur von Mike (@MadeByMike)
Sie können scrollen, wenn Sie möchten
Nun, dieses Snippet ist nicht unbedingt ein Effekt für sich. Aber es erfüllt einen Zweck. Sehr oft verwenden Designer Hintergrundbilder im Vollbildmodus und andere Elemente, die das Scrollen für den Benutzer mehrdeutig machen können. Kleine Elemente wie dieses animierte Bildlaufsymbol lassen Benutzer wissen, dass noch weitere Inhalte folgen werden. Es ist nicht für alle Situationen geeignet, aber manchmal macht es Sinn.
Siehe den Stift
CSS Site Scroll Micro Animation von Ryan Mulligan
Der unglaubliche Kontraktionskopf
Solche selbstklebenden Schlagzeilen sind im Laufe der Jahre zu einem festen Bestandteil geworden. Warum? Sie können eine Menge Benutzerfreundlichkeit hinzufügen. Die Möglichkeit, zu anderen Bereichen einer Site zu navigieren, ohne zum oberen Rand der Seite scrollen zu müssen, erleichtert das Leben einfach. Wie üblich wird dieses Beispiel beim Scrollen auf der Seite auf ein kompakteres Element verkleinert.
Siehe den Stift
Scroll Header von Blake Bowen
Nach rechts schieben
Hier ist eine andere Version des Aufkleber-Headers. Dieses Mal ist es für eine einseitige Site eingerichtet. Die obere Navigation hebt automatisch den aktuellen Inhaltsbereich hervor und ermöglicht es Benutzern, schnell zwischen ihnen zu wechseln.
Siehe den Stift
Sticky Slider Navigation (Responsive) von Ettrics
Fliegende Farben
Werfen wir einen Blick auf ein anderes Snippet, das sich hervorragend für einseitige oder langseitige Websites mit mehreren Inhaltsabschnitten eignet. Verwenden Sie CSS und ein wenig jQuery, um die Hintergrundfarbe beim Scrollen nach unten zu ändern (und ja, es funktioniert auch umgekehrt). Möglicherweise möchten Sie auch ein Skript abfragen, das dasselbe tut, jedoch mit Verläufen.
Siehe den Stift
Ändern Sie die Hintergrundfarbe beim Scrollen von Version 2 von JP Nothard
Vertikal in horizontal konvertieren
Wollten Sie schon immer, dass Ihre Website horizontal statt vertikal scrollt? Sie können es natürlich ohne ausgefallenes Skript tun. Aber was ist, wenn Sie keine horizontale Bildlaufleiste möchten? In diesem Fall benötigen Sie so etwas wie dieses Beispiel. Es wird ein Skript namens jInvertScroll verwendet, das Ihre Site in ein Side-Scrolling mit Parallaxeeffekten verwandelt.
Siehe den Stift
Seitliches Scrollen von jInvertScroll nach SitePoint
Auf Schriftrolle animieren
Zu den wichtigsten Trends gehört heutzutage das Animieren von Inhalten beim Eintritt in das Grafikfenster. Wenn Sie mit gutem Geschmack fertig sind, können Sie auf jeden Abschnitt aufmerksam machen. Aber zu weit gehen und eher wie ein Online-Zirkus. Wenn Sie sich entscheiden, den Sprung zu wagen, ziehen Sie diesen Ausschnitt in Betracht. Es wird von der AOS-Bibliothek (Animated Scrolling) unterstützt.
Siehe den Stift
AOS – Snik-Animationen
Bildlauf, Webbenutzer
In der Vergangenheit war der vorherrschende Gedanke, eine Verschiebung um jeden Preis zu vermeiden. Dank Social Media und Smartphones können wir jetzt lange Strecken mit Daumen (und Cursorn) zurücklegen. So könnten wir es auch lustig und nützlich machen.
Das ist es, was die vorherigen Fragmente vorhaben. Sie decken eine Vielzahl von Anwendungsfällen ab und vermeiden größtenteils Ärger. Darum geht es beim Aufbau einer soliden UX.
Suchen Sie weitere Ideen? Schauen Sie sich unsere CodePen-Sammlung an, um weitere Scroll-Schnipsel zu erhalten!
