Komponente „Stories“ erstellen

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

Adam Argyle

In diesem Beitrag möchte ich erklären, wie wir eine Stories-Komponente für das responsiv ist, die Tastaturnavigation unterstützt und Browser.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
. Demo

Wenn Sie an einer praktischen Demonstration interessieren möchten, wie Sie diese Komponente findest du im Codelab für die Komponente „Stories“.

Falls Sie Videos bevorzugen, finden Sie hier eine YouTube-Version dieses Beitrags:

Übersicht

Zwei beliebte Beispiele für die User Experience von Stories sind Snapchat Stories und Instagram Stories (und Flotten ganz zu schweigen). Im Allgemeinen sind Stories ein Muster, das nur für Mobilgeräte und durch Tippen zum Navigieren Abos. Auf Instagram öffnen Nutzende beispielsweise die Story eines Freundes. und die darin enthaltenen Bilder durchgehen. Normalerweise machen sie so viele Freunde . Durch Tippen auf die rechte Seite des Geräts gelangt ein Nutzer direkt zur Seite des Freundes für den nächsten Artikel. Wenn ein Nutzer nach rechts wischt, springt er direkt zu einem anderen Freund. Eine Story-Komponente ist einem Karussell ziemlich ähnlich, ermöglicht aber die Navigation mehrdimensionalen Arrays im Gegensatz zu einem eindimensionalen Array. Es ist, als wäre darin ein Karussell. für jedes Karussell. 🤯

<ph type="x-smartling-placeholder">
</ph> Visualisierung eines mehrdimensionalen Arrays mit Karten Von links nach rechts ist ein Stapel lilafarbener Karten zu sehen. Jede Karte enthält eine oder mehrere Karten mit cyanfarbenem Rand. Liste in einer Liste. <ph type="x-smartling-placeholder">
</ph> Erstes Karussell mit Freunden
2. „gestapelt“ Karussell mit Geschichten
👍 Listet in einer Liste, auch als multidimensionales Array bezeichnet.

Die richtigen Tools für Ihre Aufgaben auswählen

Insgesamt fand ich diese Komponente dank ein paar wichtige Funktionen der Webplattform. Sehen wir uns diese genauer an.

CSS-Raster

Unser Layout war für das CSS Grid überhaupt kein Problem, da es einige effektive Möglichkeiten zur Codierung von Inhalten bieten.

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;
}
<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
Chrome-Entwicklertools verwenden Gerätemodus um die mit „Raster“ erstellten Spalten hervorzuheben.

Sehen wir uns dieses grid-Layout genauer an:

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

Auf einem Mobiltelefon entspricht die Zeilengröße der Höhe des Darstellungsbereichs und Jede Spalte entspricht der Breite des Darstellungsbereichs. Weiter mit den Snapchat-Stories Beispiel für Instagram Stories: Jede Spalte enthält die Story eines Freundes. Wir wollen Freunde die sich außerhalb des Darstellungsbereichs fortsetzen, damit wir zu einer Stelle scrollen können. Das Raster erstellt so viele Spalten, wie für das Layout Ihres HTML-Codes für jeden Freund erforderlich ist. und einen dynamischen und responsiven Scroll-Container für uns. Raster konnten wir den gesamten Effekt zentralisieren.

Stapeln

Für jeden Freund müssen die Geschichten für die Paginierung bereit sein. Zur Vorbereitung auf Animationen und andere lustige Muster habe ich einen Stapel ausgewählt. Wenn ich von „Stack“ sage, nicht so, als schaut man von der Seite.

Mit CSS-Raster können wir ein einzelliges Raster (also ein Quadrat) definieren, in dem die Zeilen und Spalten haben einen Alias ([story]). Dann wird jedes untergeordnete Element diesem Alias zugewiesen. Bereich mit einer einzelnen Zelle mit Alias:

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

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

So kann unser HTML-Code die Stapelreihenfolge steuern und alle Elemente im Ablauf. Die absolute-Positionierung oder z-index Wir mussten nichts mit height: 100% oder width: 100% korrigieren. Das übergeordnete Raster die Größe des Darstellungsbereichs für das Storybild bereits definiert, musste gebeten werden, es zu füllen!

CSS-Scroll-Snap-Punkte

Die Spezifikation für CSS-Scroll-Snap-Punkte macht es möglich, um Elemente beim Scrollen im Darstellungsbereich zu fixieren. Bevor es diese CSS-Eigenschaften gab, mussten Sie JavaScript verwenden, und es war... schwierig, gelinde gesagt. Zur Kasse Jetzt neu: CSS-Scroll-Snap-Punkte von Sarah Drasner erklärt, wie sie verwendet werden.

<ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">
. Horizontales Scrollen ohne und mit scroll-snap-points-Stilen. Andernfalls können Nutzer wie gewohnt scrollen. Damit ruht der Browser 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;
}
 <ph type="x-smartling-placeholder"></ph> Das übergeordnete Element mit Overscroll definiert das Andockverhalten.
Kind
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
 <ph type="x-smartling-placeholder"></ph> Kinder wollen zum Ziel werden.

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

  • Kostenlose Bedienungshilfen: Laut der Spezifikation für Scroll-Snap-Punkte ist das Drücken der Der Linkspfeil und der Rechtspfeil sollten sich durch die Ausrichtungspunkte bewegen. ist standardmäßig aktiviert.
  • Eine wachsende Spezifikation: Die Spezifikation für Scroll-Snap-Punkte erhält neue Funktionen und Verbesserungen Das bedeutet, dass sich meine Komponente "Stories" wahrscheinlich nur hier draußen.
  • Einfache Implementierung: Scroll-Snap-Punkte sind praktisch für die Anwendungsfall mit berührungszentrierter horizontaler Paginierung
  • Trägheit im Stil einer kostenlosen Plattform. Jede Plattform wird scrollen und in ihrem Stil verbleiben, eine normalisierte Trägheit, die einen unheimlichen Scroll- und Ruhestil haben kann.

Browserübergreifende Kompatibilität

Die Tests wurden für Opera, Firefox, Safari und Chrome sowie für Android und iOS durchgeführt. Hier finden Sie eine kurze Zusammenfassung der Webfunktionen, bei denen wir Unterschiede in den Funktionen und beim Support festgestellt haben.

Einige Preisvergleichsportale konnten jedoch nicht angewendet werden, sodass einige Plattformen derzeit nicht auf UX-Design verzichten. Optimierungen vor. Es hat mir Spaß gemacht, diese Funktionen nicht verwalten zu müssen, und ich fühle mich sicher damit sie irgendwann auch andere Browser und Plattformen erreichen.

scroll-snap-stop

Karussells waren einer der wichtigsten UX-Anwendungsfälle, die zur Erstellung der CSS-Spezifikation für Scroll-Snap-Punkte. Im Gegensatz zu Stories muss ein Karussell nicht immer anhalten. auf jedes Bild, nachdem Nutzende damit interagiert haben. Es kann in Ordnung oder ermutigend sein, schnell durch das Karussell blättern. In Stories lässt sich hingegen am besten einzeln navigieren, und genau das bietet scroll-snap-stop.

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

Beim Verfassen dieses Beitrags wird scroll-snap-stop nur auf Chromium-Basis unterstützt Browser. Zur Kasse Browserkompatibilität . Das ist aber kein Hindernis. Es bedeutet lediglich, dass in nicht unterstützten Browsern können Nutzer versehentlich einen Freund überspringen. Nutzende müssen also vorsichtiger sein müssen wir JavaScript schreiben, damit ein übersprungener Freund nicht als angezeigt markiert wird.

Weitere Informationen finden Sie in der Spezifikation, wenn Sie interessiert sind.

overscroll-behavior

Haben Sie schon einmal durch ein modales Fenster gescrollt und plötzlich durch das Dialogfenster scrollen? overscroll-behavior lässt der Entwickler das Scrollen einfangen, ohne es zu überlassen. verlassen. Es ist für alle möglichen Anlässe geeignet. In der Komponente „Meine Stories“ wird es verwendet um zu verhindern, dass zusätzliche Wisch- und Scrollbewegungen die Komponente.

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

Safari und Opera waren die beiden Browser, bei denen unterstützen Sie das völlig in Ordnung. Diese Nutzer erhalten ein Overscroll-Erlebnis, wie sie es gewohnt sind. und diese Verbesserung wird vielleicht nie bemerkt. Ich bin ein großer Fan und mag und es als Teil jeder über einen Scroll-Funktion implementierten Funktion an. Es ist ein harmlose Ergänzung, die nur zu einer verbesserten UX führen kann.

scrollIntoView({behavior: 'smooth'})

Wenn Nutzende das Ende einer Reihe von Geschichten eines Freundes durch Tippen oder Klicken erreicht haben, ist es an der Zeit, zum nächsten Freund in der Scroll-Snap-Point-Gruppe zu gehen. Mit konnten wir auf den nächsten Freund verweisen und ihn gescrollt werden kann. Die grundlegende Unterstützung ist großartig. in jedem Browser in den sichtbaren Bereich gescrollt haben. Aber nicht jeder Browser hat es getan 'smooth'. Das bedeutet nur, beim Scrollen sichtbar, anstatt sie anzuklicken.

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

Safari war der einzige Browser, der behavior: 'smooth' hier nicht unterstützt hat. Zur Kasse Browserkompatibilität .

Praktische Übung

Jetzt, da du weißt, wie ich das gemacht habe, wie würdest du es tun?! Gestalten Sie die und lernen alle Möglichkeiten kennen, das Web zu nutzen. Störung erstellen, twittern Sie mir Ihre Version und ich füge sie Community-Remixe.

Community-Remixe