Creare un componente Storie

Una panoramica fondamentale su come creare un'esperienza simile alle Storie di Instagram sul web.

Adam Argyle

In questo post voglio condividere i miei pensieri sulla creazione di un componente Storie per web che sia reattivo, supporti la navigazione da tastiera e funziona su browser.

Demo

Se preferisci una dimostrazione pratica su come creare personalmente questo componente delle Storie, consulta il codelab del componente Storie.

Se preferisci i video, ecco una versione di questo post su YouTube:

Panoramica

Due esempi popolari di UX per le Storie sono le Storie di Snapchat e le Storie di Instagram (per non parlare delle flotte). In generale, in termini di esperienza utente, le Storie sono caratterizzate da uno schema di navigazione incentrato solo sui dispositivi mobili e incentrato sul tocco. più abbonamenti. Ad esempio, su Instagram, gli utenti aprono la storia di un amico e scorrere le immagini al suo interno. Di solito fanno molti amici nel tempo. Se tocchi il lato destro del dispositivo, l'utente passa al storia successiva. Se scorri verso destra, un utente passa direttamente a un altro amico. Il componente Storia è abbastanza simile a un carosello, ma consente di spostarsi in un un array multidimensionale, anziché un array monodimensionale. È come se ci fosse una giostra all'interno in ogni carosello. 🤯

Array multidimensionale visualizzato utilizzando schede. Da sinistra a destra c'è una pila di carte con bordi viola e all'interno di ogni carta ci sono 1-molte carte con bordo ciano. Elenco in un elenco.
. Primo carosello di amici
2° "in pila" carosello di storie
👍 Elenca in un elenco, anche detto array multidimensionale

Scelta degli strumenti giusti per il lavoro

Nel complesso ho trovato questo componente piuttosto semplice da creare grazie ad alcune funzionalità critiche della piattaforma web. Vediamole insieme!

Griglia CSS

Il nostro layout non si è rivelato di qualità per CSS Grid, in quanto dispone di alcune modi efficaci per fare wrangling dei contenuti.

Layout amici

Il nostro wrapper del componente principale .stories è una visualizzazione di scorrimento orizzontale orientata ai dispositivi mobili:

.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;
}
Utilizzo di Chrome DevTools Modalità dispositivo per evidenziare le colonne create dalla griglia

Analizziamo questo layout grid:

  • Riempiamo esplicitamente l'area visibile sui dispositivi mobili con 100vh e 100vw e limitiamo le dimensioni sui computer desktop
  • / separa i nostri modelli di riga e colonna
  • auto-flow si traduce in grid-auto-flow: column
  • Il modello di flusso automatico è 100%, che in questo caso è qualsiasi sia la larghezza della finestra di scorrimento
di Gemini Advanced.

Su un cellulare, puoi considerare la dimensione delle righe come l'altezza dell'area visibile ciascuna colonna rappresenta la larghezza dell'area visibile. Per continuare con Snapchat Stories e Esempio di Storie di Instagram, ogni colonna conterrà la storia di un amico. Vogliamo degli amici storie da continuare fuori dall'area visibile, in modo da avere un punto a cui scorrere. La griglia creerà tutte le colonne necessarie per il layout del tuo HTML per ogni amico creando un container a scorrimento dinamico e reattivo. Griglia ci ha permesso di centralizzare l'intero effetto.

Sovrapposizione

Per ogni amico, abbiamo bisogno delle loro storie in uno stato pronto per l'impaginazione. Per prepararmi per l'animazione e altri motivi divertenti, ho scelto uno stack. Quando dico impilare, intendo come se stessi guardando verso il basso un panino, non come se guardassi da un lato.

Con la griglia CSS, possiamo definire una griglia a cella singola (ossia un quadrato), in cui le righe e le colonne condividono un alias ([story]) a cui viene assegnato ogni figlio spazio a cella singola con alias:

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

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

In questo modo il nostro HTML ha il controllo dell'ordine di sovrapposizione e mantiene anche tutti gli elementi nel flusso. Come puoi notare, non abbiamo dovuto fare nulla con il posizionamento di absolute o con z-index. non abbiamo dovuto confezionare correttamente con height: 100% o width: 100%. La griglia principale ha già definito le dimensioni dell'area visibile dell'immagine della storia, quindi nessuno di questi componenti della storia doveva essere detto di riempirlo!

Punti di aggancio di scorrimento CSS

Grazie alla specifica Snap Points di scorrimento CSS, un semplice clic per bloccare gli elementi nell'area visibile quando scorri. Prima che queste proprietà CSS esistessero, abbiamo dovuto usare JavaScript ed è stato... a dir poco complicato. Paga Introduzione ai punti di scorrimento di scorrimento CSS di Sarah Drasner per un'accurata analisi del loro utilizzo.

Scorrimento orizzontale senza e con scroll-snap-points stili. In caso contrario, gli utenti possono scorrere normalmente. In questo modo, il browser poggia su ogni elemento.
principale
.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;
}
L'elemento padre con overscroll definisce il comportamento di agganciamento.
bambino
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
I bambini scelgono di diventare un bersaglio rapido.

Ho scelto i punti di Snapshot per diversi motivi:

  • Accessibilità senza costi. La specifica dei punti di aggancio di scorrimento indica che, se si preme il tasto I tasti FRECCIA SINISTRA e FRECCIA DESTRA dovrebbero spostarsi tra i punti di agganciamento per impostazione predefinita.
  • Una specifica in crescita. Nuove funzionalità e miglioramenti relativi alla specifica Punti di pressione di scorrimento sempre di più, il che significa che il componente Storie potrà essere migliorato solo d'ora in poi.
  • Facilità di implementazione. Gli Snap Point di scorrimento sono realizzati in pratica per caso d'uso di paginazione orizzontale concentrata sul tocco.
  • Inerzia libera stile piattaforma. Ogni piattaforma scorrerà e si fermerà nel suo stile, invece di un'inerzia normalizzata che può avere uno stile di scorrimento insolito e a riposo.

Compatibilità tra browser

Abbiamo eseguito i test su Opera, Firefox, Safari e Chrome, oltre ad Android e iOS. Ecco un breve resoconto delle funzionalità web in cui abbiamo riscontrato differenze in termini di capacità e assistenza.

Anche se alcuni CSS non sono applicabili, al momento alcune piattaforme stanno perdendo l'esperienza utente ottimizzazioni. Mi è piaciuto non dover gestire queste funzionalità e mi sento sicura che prima o poi raggiungeranno altri browser e piattaforme.

scroll-snap-stop

I caroselli sono stati uno dei principali casi d'uso dell'esperienza utente che hanno portato alla creazione Specifica degli Snap Points di scorrimento CSS. A differenza delle Storie, un carosello non deve necessariamente interrompersi su ogni immagine dopo che l'utente ha interagito con essa. Potrebbe essere opportuno o incoraggiato scorrere rapidamente il carosello. Le storie, invece, si esplorano meglio una alla volta, ed è esattamente ciò che offre scroll-snap-stop.

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

Al momento della stesura di questo post, il servizio scroll-snap-stop è supportato soltanto su sistemi basati su Chromium browser. Paga Compatibilità del browser per aggiornamenti. Non è però un blocco. Significa solo che su browser non supportati gli utenti possono ignorare accidentalmente un amico. Quindi gli utenti dovranno solo stare più attenti, dobbiamo scrivere codice JavaScript per assicurarci che un amico ignorato non venga contrassegnato come visualizzato.

Scopri di più nel specifiche se interessato.

overscroll-behavior

Ti è mai capitato di scorrere una finestra modale quando all'improvviso iniziare a scorrere i contenuti dietro la finestra modale? overscroll-behavior consente allo sviluppatore di bloccare lo scorrimento senza mai lasciarlo esci. È adatto a tutte le occasioni. Il componente Le mie storie la utilizza per evitare che ulteriori scorrimenti e gesti di scorrimento smettano di uscire dalla di strumento di authoring.

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

Safari e Opera erano i 2 browser che non funzionavano supportarlo e il gioco è assolutamente ok. Questi utenti avranno un'esperienza di overscroll come prima e potrebbero non notare mai questo miglioramento. Personalmente sono un grande fan e mi piace come parte di quasi tutte le funzionalità overscroll che implemento. È una un'aggiunta innocua che può solo migliorare l'esperienza utente.

scrollIntoView({behavior: 'smooth'})

Quando un utente tocca o fa clic e ha raggiunto la fine dell'insieme di storie di un amico, è il momento di passare all'amico successivo nel punto di agganciamento di scorrimento impostato. Con JavaScript, siamo riusciti a fare riferimento al prossimo amico e a richiederne l'accesso hanno fatto scorrere la pagina per vederla. L'assistenza alle basi di questa procedura è ottima: in tutti i browser l'ho fatto scorrere per visualizzarlo. Tuttavia, non tutti i browser lo hanno fatto 'smooth'. Ciò significa solo è reso visibile tramite scorrimento anziché agganciato.

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

Safari è stato l'unico browser a non supportare behavior: 'smooth' qui. Paga Compatibilità del browser per aggiornamenti.

Pratico

Ora che sai come ci ho fatto, come lo faresti?! Diversifica il nostro e scoprire tutti i modi per creare sul web. Crea un Glitch. Inviami un tweet con la tua versione e la aggiungerò a vai alla sezione Remix della community di seguito.

Remix della community