Komponente „Stories“ erstellen

Eine grundlegende Übersicht dazu, wie Sie im Web eine Funktion erstellen, die Instagram Stories ähnelt.

Adam Argyle

In diesem Beitrag möchte ich meine Gedanken zum Erstellen einer responsiven, browserübergreifenden Stories-Komponente für das Web mit der Tastaturnavigation teilen.

Demo

Wenn Sie sich lieber eine praktische Demonstration zum Erstellen dieser Stories-Komponente ansehen möchten, sehen Sie sich das Codelab zur Stories-Komponente an.

Wenn du lieber ein Video ansiehst, findest du hier eine YouTube-Version dieses Beitrags:

Übersicht

Zwei beliebte Beispiele für die Stories-UX sind Snapchat- und Instagram-Stories (nicht zu vergessen: Fleets). Im Allgemeinen sind Stories ein nur für Mobilgeräte verfügbares, auf Tippen basierendes Muster zum Navigieren zwischen mehreren Abos. Auf Instagram öffnen Nutzer beispielsweise die Story eines Freundes und sehen sich die darin enthaltenen Bilder an. In der Regel geschieht dies mit vielen Freunden gleichzeitig. Wenn Nutzer rechts auf das Gerät tippen, springen sie zur nächsten Story dieses Freundes. Durch Wischen nach rechts springt ein Nutzer zu einem anderen Freund. Eine Story-Komponente ähnelt einem Karussell, ermöglicht aber die Navigation in einem mehrdimensionalen Array im Gegensatz zu einem eindimensionalen Array. Es ist, als wäre in jedem Karussell ein Karussell. 🤯

Visualisiertes mehrdimensionales Array mithilfe von Karten. Von links nach rechts ist ein Stapel von Karten mit lilafarbenen Rahmen zu sehen. Auf jeder Karte befinden sich eine oder mehrere Karten mit türkisfarbenen Rahmen. Liste in einer Liste
Erstes Karussell mit Freunden
Zweites „gestapeltes“ Karussell mit Stories
👍 Liste in einer Liste, auch als mehrdimensionales Array bezeichnet

Die richtigen Tools für die Aufgabe auswählen

Insgesamt war das Erstellen dieser Komponente dank einiger wichtiger Funktionen der Webplattform ziemlich einfach. Sehen wir uns das an.

CSS-Raster

Unser Layout stellte für CSS Grid keine große Herausforderung dar, da es einige leistungsstarke Möglichkeiten zur Verwaltung von Inhalten bietet.

Layout für Freunde

Der primäre .stories-Komponenten-Wrapper ist ein horizontaler Scrollview für Mobilgeräte:

.stories {
  inline-size: 100vw;
  block-size: 100vh;

  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;

  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}

/* desktop constraint */
@media (hover: hover) and (min-width: 480px) {
  max-inline-size: 480px;
  max-block-size: 848px;
}
Mit dem Gerätemodus der Chrome-Entwicklertools die Spalten hervorheben, die mit Grid erstellt wurden

Sehen wir uns das grid-Layout genauer an:

  • Wir füllen den Darstellungsbereich auf Mobilgeräten explizit mit 100vh und 100vw aus und beschränken die Größe auf dem Computer
  • / trennt unsere Zeilen- und Spaltenvorlagen
  • auto-flow wird als grid-auto-flow: column gelesen.
  • Die Vorlage für den automatischen Ablauf ist 100%, was in diesem Fall der Breite des Scrollfensters entspricht.

Stellen Sie sich auf einem Smartphone vor, dass die Zeilengröße der Darstellungsbereichshöhe und jede Spalte der Darstellungsbereichsbreite entspricht. Anknüpfend an das Beispiel für Snapchat- und Instagram-Storys enthält jede Spalte die Story eines Freundes. Wir möchten, dass die Stories von Freunden außerhalb des Darstellungsbereichs fortgesetzt werden, damit wir etwas zum Scrollen haben. Grid erstellt so viele Spalten, wie für das Layout deiner HTML-Datei für jede Story eines Freundes erforderlich sind. So entsteht ein dynamischer und responsiver Scrollcontainer. Mit dem Raster konnten wir den gesamten Effekt zentralisieren.

Stapeln

Für jeden Freund benötigen wir seine Storys in einem Zustand, der für die Paginierung geeignet ist. Zur Vorbereitung auf die Animation und andere lustige Muster habe ich einen Stapel ausgewählt. Wenn ich von Stapeln spreche, meine ich, dass Sie auf ein Sandwich herabblicken, nicht von der Seite darauf schauen.

Mit CSS-Rastern können wir ein Raster mit einer einzigen Zelle (d. h. ein Quadrat) definieren, bei dem die Zeilen und Spalten einen Alias ([story]) teilen. Jedem untergeordneten Element wird dann dieser Alias-Einzelzellenbereich zugewiesen:

.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.story {
  grid-area: story;
  background-size: cover;
  …
}

So wird die Stapelreihenfolge über die HTML-Datei gesteuert und alle Elemente bleiben im Fluss. Beachten Sie, dass wir nichts mit der Positionierung von absolute oder z-index tun mussten und auch keine Korrekturen mit height: 100% oder width: 100% vornehmen mussten. Das übergeordnete Raster hat bereits die Größe des Story-Bild-Viewports definiert, sodass keine dieser Story-Komponenten angewiesen werden musste, ihn zu füllen.

CSS-Scroll-Snap-Punkte

Mit der CSS-Spezifikation für Scroll-Snap-Punkte können Sie Elemente beim Scrollen ganz einfach im Darstellungsbereich fixieren. Bevor es diese CSS-Eigenschaften gab, mussten Sie JavaScript verwenden. Das war gelinde gesagt etwas schwierig. In Introducing CSS Scroll Snap Points von Sarah Drasner finden Sie eine ausführliche Anleitung zur Verwendung dieser Funktionen.

Horizontales Scrollen ohne und mit scroll-snap-points-Stilen. Ohne sie können Nutzer wie gewohnt scrollen. Dadurch liegt der Browser sanft auf jedem Artikel auf.
Übergeordnetes Element
.stories {
  display: grid;
  grid: 1fr / auto-flow 100%;
  gap: 1ch;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  overscroll-behavior: contain;
  touch-action: pan-x;
}
 Übergeordnetes Element mit Overscroll definiert das Snap-Verhalten.
Kind
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Kinder müssen zustimmen, dass sie als Snap-Ziel ausgewählt werden können.

Ich habe Scroll-Snap-Punkte aus mehreren Gründen ausgewählt:

  • Kostenloser Zugang. In der Spezifikation für Scroll-Snap-Punkte wird angegeben, dass beim Drücken der Tasten Linkspfeil und Rechtspfeil standardmäßig zwischen den Snap-Punkten gewechselt werden soll.
  • Eine wachsende Spezifikation: Die Spezifikation für Scroll-Snap-Punkte wird ständig um neue Funktionen und Verbesserungen erweitert. Das bedeutet, dass meine Stories-Komponente wahrscheinlich immer besser wird.
  • Einfache Implementierung Scroll-Snap-Punkte sind praktisch für den Touch-orientierten Anwendungsfall der horizontalen Paginierung konzipiert.
  • Inertie im Stil einer frei stehenden Plattform. Jede Plattform scrollt und ruht in ihrem eigenen Stil, im Gegensatz zur normalisierten Trägheit, die ein unheimliches Scrollen und Pausieren verursachen kann.

Browserübergreifende Kompatibilität

Wir haben die Funktion in Opera, Firefox, Safari und Chrome sowie auf Android- und iOS-Geräten getestet. Im Folgenden finden Sie eine kurze Übersicht über die Webfunktionen, bei denen wir Unterschiede bei den Funktionen und der Unterstützung festgestellt haben.

Einige CSS-Regeln konnten jedoch nicht angewendet werden, sodass einige Plattformen derzeit keine UX-Optimierungen erhalten. Ich fand es toll, dass ich diese Funktionen nicht verwalten musste, und bin zuversichtlich, dass sie irgendwann auch in anderen Browsern und auf anderen Plattformen verfügbar sein werden.

scroll-snap-stop

Karussells waren einer der wichtigsten UX-Anwendungsfälle, die zur Erstellung der CSS-Spezifikation für Scroll-Snap-Punkte geführt haben. Im Gegensatz zu Stories muss ein Karussell nicht immer bei jedem Bild anhalten, nachdem ein Nutzer damit interagiert hat. Es kann in Ordnung oder sogar erwünscht sein, schnell durch das Karussell zu scrollen. Bei Stories hingegen ist es am besten, sie einzeln zu durchsuchen. Genau das bietet scroll-snap-stop.

.user {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

Zum Zeitpunkt der Veröffentlichung dieses Beitrags wird scroll-snap-stop nur in Chromium-basierten Browsern unterstützt. Aktuelle Informationen zur Browserkompatibilität Es ist jedoch kein Hindernis. Das bedeutet nur, dass Nutzer in nicht unterstützten Browsern versehentlich einen Freund überspringen können. Nutzer müssen also vorsichtiger sein oder wir müssen JavaScript schreiben, damit ein übersprungener Freund nicht als angesehen markiert wird.

Weitere Informationen finden Sie in der Spezifikation.

overscroll-behavior

Haben Sie schon einmal durch ein modales Fenster gescrollt und plötzlich die Inhalte dahinter gesehen? Mit overscroll-behavior kann der Entwickler das Scrollen festlegen und es nie wieder zulassen. Sie eignet sich für alle möglichen Anlässe. In der Komponente „Meine Geschichten“ wird sie verwendet, um zu verhindern, dass Nutzer durch Wischen oder Scrollen die Komponente verlassen.

.stories {
  overflow-x: auto;
  overscroll-behavior: contain;
}

Safari und Opera waren die beiden Browser, die dies nicht unterstützten. Das ist völlig in Ordnung. Für diese Nutzer funktioniert das Überscrollen wie gewohnt und sie bemerken diese Verbesserung möglicherweise gar nicht. Ich persönlich bin ein großer Fan und füge sie fast jeder von mir implementierten Overscroll-Funktion hinzu. Es ist eine harmlose Ergänzung, die nur zu einer verbesserten UX führen kann.

scrollIntoView({behavior: 'smooth'})

Wenn ein Nutzer auf einen Story-Beitrag tippt oder klickt und das Ende der Storys eines Freundes erreicht hat, ist es an der Zeit, zum nächsten Freund im Satz von Scroll-Snap-Punkten zu wechseln. Mit JavaScript konnten wir auf den nächsten Freund verweisen und anfordern, dass er in den Blick gescrollt wird. Die Unterstützung der Grundlagen ist großartig; in jedem Browser wurde es in den Blick gescrollt. Aber nicht alle Browser haben das getan 'smooth'. Das bedeutet lediglich, dass es in den Blick gescrollt wird, anstatt angedockt zu werden.

element.scrollIntoView({
  behavior: 'smooth'
})

Safari war der einzige Browser, der behavior: 'smooth' hier nicht unterstützte. Aktuelle Informationen zur Browserkompatibilität

Praxisorientiert

Jetzt, da Sie wissen, wie ich das gemacht habe, wie würden Sie es machen? Lassen Sie uns unsere Ansätze diversifizieren und alle Möglichkeiten kennenlernen, wie man im Web entwickeln kann. Erstelle einen Glitch, tweete mir deine Version und ich füge sie unten im Abschnitt Community-Remixe hinzu.

Remixe der Community