Komponente „Stories“ erstellen

Eine grundlegende Übersicht darüber, wie Sie eine ähnliche Funktion wie Instagram Stories im Web erstellen können.

Adam Argyle

In diesem Beitrag möchte ich meine Überlegungen zur Entwicklung einer Stories-Komponente für das Web teilen, die responsiv ist, die Tastaturnavigation unterstützt und in allen Browsern funktioniert.

Demo

Wenn Sie lieber eine praktische Demonstration zum Erstellen dieser Stories-Komponente sehen möchten, finden Sie hier ein Codelab.

Wenn du lieber ein Video ansehen möchtest, findest du hier eine YouTube-Version dieses Beitrags:

Übersicht

Zwei beliebte Beispiele für die Stories-Benutzeroberfläche sind Snapchat Stories und Instagram Stories (ganz zu schweigen von Fleets). Im Allgemeinen sind Stories ein UX-Muster, das nur auf Mobilgeräten verfügbar ist und bei dem Nutzer durch Tippen durch mehrere Abos navigieren. Auf Instagram öffnen Nutzer beispielsweise die Story eines Freundes und sehen sich die Bilder darin an. Das machen sie in der Regel mit vielen Freunden gleichzeitig. Wenn ein Nutzer auf die rechte Seite des Geräts tippt, wird zur nächsten Story dieses Freundes gesprungen. Durch Wischen nach rechts gelangt ein Nutzer zu einem anderen Freund. Eine Story-Komponente ähnelt einem Karussell, ermöglicht aber die Navigation in einem mehrdimensionalen Array anstelle eines eindimensionalen Arrays. Es ist, als ob sich in jedem Karussell ein weiteres Karussell befindet. 🤯

Visualisierung eines mehrdimensionalen Arrays mit Karten. Von links nach rechts ist ein Stapel von Karten mit lila Rahmen zu sehen. Jede Karte enthält eine oder mehrere Karten mit cyanfarbenen Rahmen. Liste in einer Liste
 Erstes Karussell mit Freunden
 Zweites „gestapeltes“ Karussell mit Stories
👍 Liste in einer Liste, also ein mehrdimensionales Array

Die richtigen Tools für die Aufgabe auswählen

Insgesamt war es dank einiger wichtiger Webplattformfunktionen recht einfach, diese Komponente zu erstellen. Sehen wir uns die einzelnen Punkte an.

CSS-Grid

Unser Layout war für CSS Grid kein Problem, da es einige leistungsstarke Möglichkeiten zum Anordnen von Inhalten bietet.

Layout „Freunde“

Unser primärer .stories-Komponenten-Wrapper ist eine horizontale 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 durch Grid erstellten Spalten hervorheben

Sehen wir uns das grid-Layout genauer an:

  • Wir füllen den Darstellungsbereich auf Mobilgeräten explizit mit 100vh und 100vw und begrenzen die Größe auf dem Desktop.
  • / trennt unsere Zeilen- und Spaltenvorlagen.
  • auto-flow wird als grid-auto-flow: column gelesen.
  • Die Autoflow-Vorlage ist 100%. In diesem Fall ist das die Breite des Scrollfensters.

Auf einem Smartphone entspricht die Zeilengröße der Höhe des Darstellungsbereichs und jede Spalte der Breite des Darstellungsbereichs. Wenn wir beim Beispiel mit Snapchat-Stories und Instagram-Stories bleiben, ist jede Spalte die Story eines Freundes. Wir möchten, dass die Stories von Freunden auch außerhalb des Darstellungsbereichs weitergehen, damit wir scrollen können. Grid erstellt so viele Spalten, wie für das Layout des HTML-Codes für jede Freundesgeschichte erforderlich sind. So entsteht ein dynamischer und responsiver Scrolling-Container. Dank des Rasters konnten wir den gesamten Effekt zentralisieren.

Stapeln

Für jeden Freund benötigen wir seine Stories in einem für die Paginierung geeigneten Zustand. Zur Vorbereitung auf Animationen und andere interessante Muster habe ich einen Stapel ausgewählt. Wenn ich „stapeln“ sage, meine ich, dass du von oben auf ein Sandwich schaust, nicht von der Seite.

Mit CSS-Grid können wir ein Einzelzellen-Grid (d. h. ein Quadrat) definieren, in dem sich die Zeilen und Spalten einen Alias ([story]) teilen. Jedes untergeordnete Element wird dann diesem 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 durch unser HTML gesteuert und alle Elemente bleiben im Fluss. Beachten Sie, dass wir nichts mit der absolute-Positionierung oder z-index tun mussten und auch keine Korrekturen mit height: 100% oder width: 100% erforderlich waren. Im übergeordneten Raster wurde bereits die Größe des Darstellungsbereichs für das Storybild definiert. Daher musste für keine dieser Storykomponenten angegeben werden, dass sie ihn ausfüllen sollen.

CSS-Scroll-Snap-Points

Mit der CSS-Spezifikation für Scroll-Snap-Points lassen sich Elemente beim Scrollen ganz einfach im Darstellungsbereich fixieren. Bevor es diese CSS-Eigenschaften gab, mussten Sie JavaScript verwenden, was… sagen wir mal, nicht ganz einfach war. In diesem Artikel von Sarah Drasner wird die Verwendung von CSS-Scroll-Snap-Points ausführlich beschrieben.

Horizontales Scrollen ohne und mit scroll-snap-points-Stilen. Ohne diese Funktion können Nutzer wie gewohnt kostenlos scrollen. Der Browser ruht sanft auf jedem Element.
Ü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;
}
 Das Snap-Verhalten wird durch das übergeordnete Element mit Overscroll definiert.
Kind
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 Kinder können sich selbst als Snap-Ziel auswählen.

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

  • Kostenlose Barrierefreiheit: In der Spezifikation für Scroll-Snap-Points ist festgelegt, dass durch Drücken der Pfeiltasten nach links und nach rechts standardmäßig zwischen den Snap-Points gewechselt werden soll.
  • Eine wachsende Spezifikation: Die Spezifikation für Scroll-Snap-Points wird ständig um neue Funktionen und Verbesserungen erweitert. Das bedeutet, dass meine Stories-Komponente wahrscheinlich nur noch besser werden kann.
  • Einfache Implementierung: Scroll-Snap-Points sind praktisch für den berührungsbasierten Anwendungsfall der horizontalen Paginierung konzipiert.
  • Trägheit im Stil einer kostenlosen Plattform: Jede Plattform scrollt und ruht in ihrem Stil, im Gegensatz zur normalisierten Trägheit, die einen unheimlichen Scroll- und Ruhemodus haben kann.

Browserübergreifende Kompatibilität

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

Einige CSS-Regeln wurden jedoch nicht angewendet, sodass auf einigen Plattformen derzeit keine UX-Optimierungen möglich sind. Ich war froh, 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 Entwicklung der CSS-Spezifikation für Scroll-Snap-Points 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 sein oder sogar empfohlen werden, schnell durch das Karussell zu blättern. Bei Stories ist es dagegen am besten, sie einzeln durchzugehen. Genau das ermöglicht 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. Hier finden Sie Informationen zur Browserkompatibilität. Das ist jedoch kein Blocker. Das bedeutet nur, dass Nutzer in nicht unterstützten Browsern versehentlich einen Freund überspringen können. Nutzer müssen also einfach vorsichtiger sein oder wir müssen JavaScript schreiben, um sicherzustellen, dass ein übersprungener Freund nicht als angesehen markiert wird.

Weitere Informationen

overscroll-behavior

Haben Sie schon einmal in einem Modal gescrollt und plötzlich den Inhalt hinter dem Modal gescrollt? Mit overscroll-behavior kann der Entwickler das Scrollen abfangen und verhindern, dass es die Seite verlässt. Es eignet sich für alle möglichen Anlässe. Die My Stories-Komponente verwendet sie, um zu verhindern, dass zusätzliche Wisch- und Scrollgesten die Komponente verlassen.

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

Safari und Opera waren die beiden Browser, die das nicht unterstützten, was völlig in Ordnung ist. Diese Nutzer sehen das Overscroll-Verhalten, das sie gewohnt sind, und bemerken die Verbesserung möglicherweise gar nicht. Ich bin ein großer Fan und verwende es in fast jeder Overscroll-Funktion, die ich implementiere. Es ist eine harmlose Ergänzung, die nur zu einer besseren Nutzerfreundlichkeit führen kann.

scrollIntoView({behavior: 'smooth'})

Wenn ein Nutzer tippt oder klickt und das Ende der Storys eines Freundes erreicht hat, ist es an der Zeit, zum nächsten Freund im Scroll-Snap-Point-Set zu wechseln. Mit JavaScript konnten wir auf den nächsten Freund verweisen und anfordern, dass er in den sichtbaren Bereich gescrollt wird. Die Unterstützung für die Grundlagen ist großartig. Jeder Browser hat es in den Blick gerückt. Das war aber nicht bei allen Browsern der Fall. 'smooth' Das bedeutet nur, dass das Element in die Ansicht gescrollt wurde, anstatt dass es automatisch in die Ansicht gesprungen ist.

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

Safari war der einzige Browser, der behavior: 'smooth' hier nicht unterstützt hat. Hier finden Sie Informationen zur Browserkompatibilität.

Praktisch

Jetzt wissen Sie, wie ich es gemacht habe. Wie würden Sie es machen? Wir möchten unsere Ansätze diversifizieren und alle Möglichkeiten kennenlernen, die das Web bietet. Erstelle einen Glitch, schreib mir auf Twitter deine Version und ich füge sie unten im Bereich Community-Remixe hinzu.

Community-Remixe