Komponente „Stories“ erstellen

Ein grundlegender Überblick darüber, wie du eine ähnliche Erfahrung wie Instagram Stories im Web erschaffen kannst.

Adam Argyle

In diesem Beitrag möchte ich darüber sprechen, wie eine Story-Komponente für das Web erstellt wird, die responsiv ist, die Tastaturnavigation unterstützt und browserübergreifend funktioniert.

Demo

Wenn du lieber eine praktische Demonstration möchtest, wie du diese Stories-Komponente selbst erstellst, sieh dir das Codelab zur Komponente „Stories“ an.

Falls du lieber ein Video hast, findest du hier eine YouTube-Version dieses Beitrags:

Überblick

Zwei beliebte Beispiele für die User Experience von Stories sind Snapchat Stories und Instagram Stories (und natürlich Flotten). Im Allgemeinen sind Stories ein ausschließlich für Mobilgeräte vorgesehenes Muster, mit dem mehrere Abos angezeigt werden können. Auf Instagram öffnen Nutzende z. B. die Story eines Freundes und sehen sich die darin enthaltenen Bilder an. Sie tun meistens so viele Freunde gleichzeitig. Durch Tippen auf die rechte Seite des Geräts springen Nutzende zur nächsten Geschichte dieses Freundes. Durch Wischen nach rechts springen Nutzende zu einem anderen Freund weiter. Eine Story-Komponente ist einem Karussell ähnlich, ermöglicht jedoch das Navigieren in einem mehrdimensionalen Array anstatt in einem eindimensionalen Array. Es ist, als wäre in jedem Karussell ein Karussell. 🤯

Visualisierung eines mehrdimensionalen Arrays mit Karten Von links nach rechts befindet sich ein Stapel lilafarbener Karten mit einem Rahmen, auf denen sich jeweils 1: viele cyanfarbige Karten befinden. Liste in einer Liste.
1. Karussell mit Freunden
Zweites „gestapeltes“ Karussell mit Artikeln
👍 Liste in einer Liste, auch als mehrdimensionales Array bekannt

Die richtigen Tools für Ihre Aufgaben auswählen

Insgesamt fand ich die Erstellung dieser Komponente dank einiger wichtiger Funktionen der Webplattform ziemlich einfach. Sehen wir uns das genauer an!

CSS-Raster

Unser Layout erwies sich als keine große Herausforderung für das CSS Grid, da es einige leistungsstarke Möglichkeiten zum Wrangleing von Inhalten bietet.

Freunde-Layout

Der primäre Wrapper für .stories-Komponenten ist eine horizontale Scroll-View 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;
}
Den Gerätemodus der Chrome-Entwicklertools verwenden, um die von Grid erstellten Spalten hervorzuheben

Sehen wir uns dieses grid-Layout an:

  • Auf Mobilgeräten wird der Darstellungsbereich explizit mit 100vh und 100vw ausgefüllt. Auf Desktop-Computern wird die Größe eingeschränkt.
  • / trennt unsere Zeilen- und Spaltenvorlagen voneinander
  • auto-flow wird in folgende Sprache übersetzt: grid-auto-flow: column
  • Die Autoflow-Vorlage ist 100%, was in diesem Fall der Breite des Scrollfensters entspricht

Auf einem Mobiltelefon ist dies so, als ob die Zeilengröße die Höhe des Darstellungsbereichs und jede Spalte die Breite des Darstellungsbereichs darstellt. In unserem Beispiel mit Snapchat-Stories und Instagram-Stories ist jede Spalte die Geschichte eines Freundes. Die Stories von Freunden sollen außerhalb des Darstellungsbereichs fortgesetzt werden, damit wir dorthin scrollen können. Das Raster erzeugt so viele Spalten, wie es zum Layout Ihres HTML-Codes für jede Freundschaftsgeschichte benötigt wird, und erstellt so einen dynamischen und responsiven Scroll-Container. Mit Grid konnten wir den gesamten Effekt zentralisieren.

Stapeln

Für jeden Freund brauchen wir seine Geschichten in einer paginierten Form. Als Vorbereitung auf Animationen und andere witzige Muster habe ich einen Stapel ausgewählt. Wenn ich „Stapel“ sage, meine ich, als ob man auf ein Sandwich guckt, nicht wie von der Seite.

Mit dem CSS-Raster können wir ein einzelliges Raster definieren (d. h. ein Quadrat), in dem die Zeilen und Spalten einen Alias ([story]) gemeinsam nutzen. Jedes untergeordnete Element wird dann diesem Aliasbereich zugewiesen:

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

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

Dadurch erhält unser HTML-Code die Kontrolle über die Stapelreihenfolge und sorgt dafür, dass alle Elemente im Ablauf bleiben. Beachten Sie, dass wir mit der absolute-Positionierung oder z-index nichts tun mussten und keine Korrektur mit height: 100% oder width: 100% erforderlich war. Im übergeordneten Raster wurde die Größe des Darstellungsbereichs des Storybilds bereits definiert. Daher muss keine dieser Storykomponenten zum Füllen des Storytellings verwendet werden.

CSS-Scroll-Snap-Punkte

Mit der Spezifikation für Snap Points beim Scrollen in CSS ist es ein Kinderspiel, Elemente beim Scrollen im Darstellungsbereich zu fixieren. Bevor es diese CSS-Eigenschaften gab, musste JavaScript verwendet werden, und es war... knifflig, gelinde gesagt. Sehen Sie sich Introducing CSS Scroll Snap Points von Sarah Drasner an, um ausführliche Informationen zur Verwendung zu erhalten.

Horizontales Scrollen ohne und mit scroll-snap-points-Stilen. Andernfalls können Nutzer wie gewohnt kostenlos scrollen. Mit dieser Schaltfläche legt der Browser sanft jedes Element fest.
parent
.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;
}
Ein übergeordnetes Element mit Overscroll definiert das Andockverhalten.
Kind
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
Kinder entscheiden sich dafür, ein Snap Ziel zu sein.

Ich habe mich aus mehreren Gründen für Snap-Punkte entschieden:

  • Kostenlose Barrierefreiheit: Die Spezifikation für die Snap-Scroll-Punkte besagt, dass durch Drücken der Links- und Rechtspfeil-Tasten standardmäßig durch die Andockpunkte gewechselt werden sollte.
  • Die Spezifikation wird ständig erweitert. Die Spezifikation für Scroll Snap Points erhält ständig neue Funktionen und Verbesserungen. Das bedeutet, dass meine Stories-Komponente von nun an wahrscheinlich immer besser wird.
  • Einfache Implementierung: Scroll-Snap Points wurden praktisch für den Anwendungsfall einer berührungsorientierten horizontalen Paginierung erstellt.
  • Kostenlose Trägheit im Plattformstil: Jede Plattform scrollt und ruht in ihrem Stil, im Gegensatz zur normalisierten Trägheit, die einen ungewöhnlichen Scroll- und Ruhestil haben kann.

Browserübergreifende Kompatibilität

Tests wurden mit Opera, Firefox, Safari und Chrome sowie Android und iOS durchgeführt. Hier ist ein kurzer Überblick über die Webfeatures, bei denen wir Unterschiede in den Funktionen und beim Support festgestellt haben.

Wir haben allerdings einige CSS nicht angewendet, sodass einige Plattformen derzeit keine UX-Optimierungen verpassen. Es hat mir Spaß gemacht, diese Funktionen nicht verwalten zu müssen, und ich bin zuversichtlich, dass sie irgendwann auch auf andere Browser und Plattformen übertragen werden.

scroll-snap-stop

Karussells waren einer der wichtigsten UX-Anwendungsfälle, die die Erstellung der CSS-Spezifikation „Snap Points für Scroll-Punkte“ veranlasst haben. Im Gegensatz zu Stories muss ein Karussell nicht immer bei jedem Bild anhalten, nachdem ein Nutzer damit interagiert hat. Vielleicht ist es in Ordnung oder auch empfohlen, schnell durch das Karussell zu wechseln. Storys hingegen lassen sich am besten einzeln durchstöbern, und genau das bietet scroll-snap-stop.

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

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

Weitere Informationen finden Sie in der Spezifikation.

overscroll-behavior

Haben Sie schon einmal durch ein modales Fenster gescrollt, als Sie plötzlich durch den Inhalt hinter dem Dialogfenster gescrollt haben? Mit overscroll-behavior kann der Entwickler das Scrollen blockieren und nie wieder verlassen. Es ist für alle Gelegenheiten geeignet. Damit wird verhindert, dass zusätzliche Wischbewegungen und Scroll-Gesten die Komponente verlassen.

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

Safari und Opera waren die beiden Browser, die dies nicht unterstützten, und das ist völlig in Ordnung. Diesen Nutzern wird eine Overscroll-Erfahrung geboten, wie sie es gewohnt sind, und bemerken diese Verbesserung möglicherweise nie. Ich persönlich bin ein großer Fan und füge ihn gerne in fast jede Overscroll-Funktion ein. Es ist eine harmlose Ergänzung, die nur zu einer besseren UX führen kann.

scrollIntoView({behavior: 'smooth'})

Wenn ein Nutzer tippt oder klickt und das Ende der Serie eines Freundes erreicht hat, muss er zum nächsten Freund in der festgelegten Scroll-Funktion wechseln. Mit JavaScript konnten wir auf den nächsten Freund verweisen und darum bitten, ihn durch Scrollen sichtbar zu machen. Die grundlegende Unterstützung ist hervorragend, da jeder Browser das Bild vollständig sichtbar gemacht hat. Aber nicht jeder Browser war dafür 'smooth'. Das bedeutet lediglich, dass es sichtbar ist, statt es angedockt zu werden.

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

Safari war hier der einzige Browser, der behavior: 'smooth' nicht unterstützt hat. Unter Browserkompatibilität findest du Updates.

Praktische Fertigkeiten

Jetzt, wo du weißt, wie ich es gemacht habe, wie würdest du es tun?! Vielfältige Ansätze und verschiedene Möglichkeiten für das Web kennenlernen. Erstelle einen Glitch, twittere mich über deine Version und ich füge sie unten zum Abschnitt Community-Remixe hinzu.

Community-Remixe