Durch das gelegentliche (und durchdachte) Durchbrechen von Nutzererwartungen können Sie zusätzliche Aufmerksamkeit auf bestimmte Bereiche Ihrer Website lenken und ein herrlich immersives Erlebnis erschaffen, das etwas außerhalb der Norm liegt. Gezielte horizontale Scroll-Bereiche bieten ein leistungsstarkes Werkzeug für diese UX-Taktik.
Und da so viele von Ihnen gefragt haben, wie wir den horizontal scrollenden Bereich auf der Interactions-2.0-Ankündigungsseite erstellt haben, zeigen wir Ihnen, wie Sie es selbst machen können.
Bevor wir eintauchen, schauen Sie sich die Horizontal-Scroll-Demo an. Oder klonen Sie die Website, um sich einzuarbeiten und sie zurückzuentwickeln!
Schritt 1: Fügen Sie die Wrapper-Divs hinzu und stylen Sie sie
Damit unser horizontal scrollender Bereich die größte Wirkung entfaltet, haben wir ihn in die Mitte unserer Demo-Seite platziert. Wenn Sie mitmachen, stellen Sie sicher, dasselbe zu tun.
Fügen Sie zunächst ein Div zur Arbeitsfläche hinzu und geben Sie ihm die Klasse „Gallery". Fügen Sie dann folgende Stile hinzu:
- Margin top: 50px (oben und unten)
- Width: 100%
- Height: 4000px
- Position: Relative
Um den Farbverlauf-Hintergrund für den Bereich zu erstellen, fügen Sie Folgendes im Background-Bereich hinzu:
- Type: Linear
- Angle: 45°
- Color stop 1: #662d8c
- Color stop 2: #ed1e79
Fügen Sie dann ein weiteres Div innerhalb des soeben erstellten „Gallery"-Divs hinzu und nennen Sie es „Gallery Scroll Track".
Setzen Sie die Position auf Absolute, Full. Ändern Sie den Z-Index auf 1.
Fügen Sie ein weiteres Div innerhalb des „Gallery Scroll Track"-Divs hinzu und geben Sie ihm die Klasse „Gallery Container" mit diesen Einstellungen:
- Width: 100%
- Height: 100vh
- Overflow: Hidden
- Position: Relative, top, 0px
Fügen Sie ein weiteres Div innerhalb des „Gallery Scroll Track"-Divs hinzu, genannt „Gallery Track", mit diesen Einstellungen:
- Display settings: Flex
- Flex Layout: Horizontal, justify left, align center
- Width: 300vw
- Height: 100%
- Position: Relative
Schritt 2: Fügen Sie Ihren Content hinzu
Mittlerweile sollte Ihr Navigator-Panel etwa so aussehen:
In den folgenden Schritten fügen wir unsere Bilder zum „Gallery Track"-Div hinzu. Ich habe mich entschieden, sie über Divs mit Hintergrundbildern hinzuzufügen, um die Sache einfach zu halten, doch Sie könnten alles Mögliche anzeigen, von Fotos von Teammitgliedern bis zu Kundenzitaten, und sogar Ihren Content aus dem CMS ziehen.
Fügen Sie also ein Div zum „Gallery Track" hinzu und geben Sie ihm die Klasse „Gallery Image" mit den folgenden Einstellungen:
- Flex item: Expand
- Margin: 20px (alle Seiten)
- Height: 70vh
- Border radius: 5px
Um den Bildern zu helfen, sich abzuheben, können Sie auch einen Drop-Shadow mit diesen Einstellungen hinzufügen:
- Color: rgba (0, 0, 0, 0.25)
- Angle: 135°
- Distance: 1px
- Blur: 19px
- Size: 0px
Jetzt haben Sie einen Div-Block, der die gesamte Breite des Gallery-Containers einnimmt, aber kein Hintergrundbild hat. Da ich das nicht mit dynamischem Content aus dem CMS aufbaue, werde ich jedem „Gallery Image"-Div-Block eine zusätzliche Combo-Klasse hinzufügen, damit ich jedem Element ein eigenes Hintergrundbild geben kann.
Wählen Sie das „Gallery Image"-Div, fügen Sie eine Combo-Klasse „1" hinzu, scrollen Sie dann nach unten zum Background-Bereich und fügen Sie ein Hintergrundbild hinzu.
Nutzen Sie diese Einstellungen:
- Size: Cover
- Position: Center
- Tile: None
Fügen Sie dann Ihr Bild hinzu.
Nun werden wir dieses „Gallery Image"-Div duplizieren, indem wir mit Rechtsklick so oft duplizieren, wie Sie benötigen.
Offensichtlich haben wir ein kleines Problem: alle Bilder sind gleich! Da wir die Bilder über CSS hinzufügen, hat jedes Element mit der Combo-Klasse Gallery Image 1 dasselbe Hintergrundbild.
Um das zu beheben, öffnen Sie das Navigator-Panel, wählen Sie ein Gallery-Image-Div, und duplizieren Sie Klasse 1. Ändern Sie dann den Namen zu 2, ersetzen Sie das Hintergrundbild, und wiederholen Sie diesen Prozess für jede Combo-Klasse.
Schritt 3: Fügen Sie Interaktionen hinzu
Okay, jetzt, wo Sie eine separate Combo-Klasse für jedes Bild haben, gehen Sie zurück zum Navigator-Panel und wählen Sie das Div „Gallery Scroll Track".
Öffnen Sie jetzt das „Interactions"-Panel, klicken Sie auf das Plus oben rechts. Wählen Sie aus dem Dropdown-Menü „While Scrolling in View".
Ändern Sie dann „Smoothing" zu „60%" und klicken Sie auf das „Plus"-Symbol.
Nennen Sie die Interaktion „Gallery Scroll Trigger".
Klicken Sie auf das Plus-Symbol neben der „0%"-Markierung. Wählen Sie aus dem Dropdown-Menü die „Move"-Transformation.
Mit der ersten Interaktion bei 0% ausgewählt, ändern Sie die „X"-Position zu „0vw".
Markieren Sie als Nächstes die Interaktion bei 100%, ändern Sie den „Keyframe" zu „80%", und setzen Sie „X" auf „-200vw".
Schritt 4: Letzter Schritt!
Das ist der letzte und ein entscheidender Schritt. Klicken Sie auf das „Pages"-Symbol im linken Panel.
Bewegen Sie den Mauszeiger über das „Home"-Symbol. Daneben erscheint das Symbol „Edit Page Details" – klicken Sie darauf. Ein neues Panel öffnet sich. Scrollen Sie nach unten zum Bereich „Custom Code" und fügen Sie den folgenden Code-Ausschnitt in das Eingabefeld „Inside <head> tag" ein.
<style>
.gallery-container {
position: -webkit-sticky !important;
position: sticky !important;
}
</style>
Veröffentlichen Sie und Sie sind fertig!
