Créer un composant "Stories"

Découvrez comment créer une expérience semblable aux stories Instagram sur le Web.

Adam Argyle

Dans cet article, je vais vous expliquer comment créer un composant "Stories" le Web réactif, compatible avec la navigation au clavier et compatible avec des navigateurs.

Si vous préférez une démonstration pratique de la création de ce composant Stories, consultez l'atelier de programmation sur le composant Stories.

Si vous préférez la vidéo, voici une version YouTube de cet article:

Présentation

Les stories Snapchat et Instagram (sans parler des flottes) sont deux exemples populaires de l'expérience utilisateur pour les stories. En termes généraux liés à l'expérience utilisateur, les stories sont un format de navigation sur mobile uniquement plusieurs abonnements. Par exemple, sur Instagram, les utilisateurs ouvrent la story d'un ami. et passer en revue les images qu'il contient. En général, ils ont autant d'amis en temps réel. En tapotant sur le côté droit de l'appareil, un utilisateur accède directement histoire suivante. En balayant l'écran vers la droite, l'utilisateur passe directement à un autre ami. Un composant "Histoire" est assez semblable à un carrousel, mais il permet de naviguer dans un tableau multidimensionnel par opposition à un tableau unidimensionnel. Comme s'il y avait un carrousel à l'intérieur chaque carrousel. 🤯

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

Choisir les bons outils pour une tâche

Dans l'ensemble, j'ai trouvé ce composant assez simple à créer, grâce à quelques les fonctionnalités essentielles de la plate-forme Web. Passons-les en revue !

Grille CSS

Notre mise en page s'est avérée peu complexe pour la grille CSS, car elle est dotée de certaines puissants moyens de formater du contenu.

Mise en page "Amis"

Notre wrapper de composant .stories principal est une vue de défilement horizontale orientée mobile:

.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;
}

Récapitulons cette mise en page grid:

• Nous remplissons explicitement la fenêtre d'affichage sur mobile avec 100vh et 100vw et limitons la taille sur les ordinateurs.
• / sépare nos modèles de lignes et de colonnes.
• auto-flow se traduit par grid-auto-flow: column
• Le modèle de flux automatique est 100%, ce qui correspond dans ce cas à la largeur de la fenêtre de défilement.

Sur un téléphone mobile, considérez cela comme la taille de la ligne étant la hauteur de la fenêtre d'affichage chaque colonne étant la largeur de la fenêtre d'affichage. Continuer avec les stories Snapchat Par exemple, dans Instagram Stories, chaque colonne sera l'histoire d'un ami. Nous voulons des amis pour que les articles se poursuivent en dehors de la fenêtre d'affichage. La grille créera le nombre de colonnes nécessaire pour mettre en page votre code HTML pour chaque ami pour créer un conteneur à défilement dynamique et responsif. Grille nous a permis de centraliser l'ensemble des effets.

Empilables

Nous avons besoin que les histoires de chaque ami soient prêtes pour la pagination. Pour préparer l'animation et d'autres motifs amusants, j'ai choisi une pile. Quand je dis "pile", je veux dire que vous regardez vers le bas un sandwich, pas comme si vous regardiez de côté.

Avec la grille CSS, nous pouvons définir une grille à une seule cellule (c'est-à-dire un carré), dans laquelle les lignes et les colonnes partagent un alias ([story]), auquel chaque enfant est attribué. espace à une seule cellule avec alias:

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

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

Cela permet à notre HTML de contrôler l'ordre d'empilement et conserve également tous les éléments en cours. Notez que nous n'avons pas eu besoin de faire quoi que ce soit avec le positionnement absolute ou z-index. nous n'avons pas eu besoin de corriger l'erreur avec height: 100% ou width: 100%. Grille parente déjà défini la taille de la fenêtre d'affichage de l'image de la story. il fallait lui dire de la remplir !

Points d'ancrage de défilement CSS

La spécification de points d'ancrage de défilement CSS pour verrouiller les éléments dans la fenêtre d'affichage lors du défilement. Avant que ces propriétés CSS existent, vous deviez utiliser JavaScript, et c'était... du moins difficile. Départ Présentation des points d'ancrage de défilement CSS de Sarah Drasner pour une présentation détaillée de la façon de les utiliser.

.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;
}

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

J'ai choisi les points d'ancrage de défilement pour plusieurs raisons:

• Accessibilité sans frais. La spécification de points d'ancrage de défilement indique que si vous appuyez sur Les touches flèche vers la gauche et flèche vers la droite doivent se déplacer entre les points d'ancrage. par défaut.
• Une spécification qui ne cesse de s'étoffer : Nouvelles fonctionnalités et améliorations pour la spécification des points d'ancrage de défilement Cela signifie que le composant "Stories" sera probablement amélioré tout à l'heure.
• Simplicité d'implémentation. Les points d'ancrage de défilement sont conçus de la pagination horizontale axée sur l'écran tactile.
• Inertie libre comme celle d'une plate-forme : Chaque plate-forme défile et reste dans son style, par opposition à une inertie normalisée qui peut avoir un style de défilement et de repos étrange.

Compatibilité multi-navigateur

Nous avons testé Opera, Firefox, Safari et Chrome, ainsi qu'Android et iOS. Voici un bref aperçu des fonctionnalités Web pour lesquelles nous avons constaté des différences en termes de capacités et d'assistance.

Cependant, certains CSS ne s'appliquent pas, et certaines plates-formes passent donc à côté de l'expérience utilisateur. et des optimisations. J'ai apprécié de ne pas avoir à gérer ces fonctionnalités et je suis confiant qu’elles finiront par atteindre d’autres navigateurs et plateformes.

scroll-snap-stop

Les carrousels ont été l'un des principaux cas d'utilisation de l'UX qui ont motivé la création du Spécification des points d'accrochage du défilement CSS. Contrairement aux stories, un carrousel ne doit pas toujours s'arrêter sur chaque image après qu'un utilisateur a interagi avec elle. Il peut être acceptable ou encouragé faire défiler rapidement le carrousel. Les histoires, en revanche, doivent être lues une par une, et c'est exactement ce que scroll-snap-stop fournit.

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

Au moment de la rédaction de cet article, scroll-snap-stop n'est compatible qu'avec les navigateurs des navigateurs. Départ Compatibilité du navigateur pour obtenir des mises à jour. Ce n’est cependant pas un blocage. Cela signifie simplement que sur les navigateurs non pris en charge les utilisateurs peuvent ignorer accidentellement un ami. Les utilisateurs devront simplement être plus prudents, ou nous devons écrire JavaScript pour nous assurer qu'un ami ignoré n'est pas marqué comme consulté.

Pour en savoir plus, consultez le caractéristiques intéressé.

overscroll-behavior

Avez-vous déjà fait défiler une modale lorsque vous avez soudainement commencer à faire défiler le contenu derrière la modale ? overscroll-behavior permet au développeur de piéger le défilement et de ne jamais le laisser partir. Idéal en toutes sortes d'occasions. Le composant "Mes stories" l'utilise pour éviter que d'autres balayages ou gestes de défilement ne quittent .

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

Safari et Opera étaient les deux navigateurs qui n'avaient pas compatibles, tout à fait acceptable. Ces utilisateurs bénéficieront du défilement hors limites comme ils sont habitués à et vous ne remarquerez peut-être jamais cette amélioration. Personnellement, je suis un grand fan et j'aime en l'incluant dans presque toutes les fonctionnalités de défilement hors limites que j'implémente. Il s'agit d'un des ajouts inoffensifs qui ne peuvent qu'améliorer l'expérience utilisateur.

scrollIntoView({behavior: 'smooth'})

Lorsqu'un utilisateur appuie ou clique et a atteint la fin de l'ensemble d'histoires d'un ami, il est temps de passer à l'ami suivant dans le point d'ancrage de défilement défini. Avec JavaScript, nous avons pu faire référence au prochain ami et lui demander jusqu'à ce qu'il s'affiche. La prise en charge des principes de base est excellente ; tous les navigateurs l'ai fait défiler pour l'afficher. Cependant, tous les navigateurs ne l'ont pas fait 'smooth'. Cela signifie simplement on la fait défiler jusqu'à ce qu'elle soit visible au lieu d'être ancrée.

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

Safari est le seul navigateur à ne pas prendre en charge behavior: 'smooth' dans ce cas. Départ Compatibilité du navigateur pour obtenir des mises à jour.

Activités pratiques

Maintenant que tu sais comment j'ai fait, comment faire ?! Diversifions et à découvrir toutes les méthodes de développement sur le Web. créer un Glitch ; me envoyer un tweet pour votre version, et je l'ajouterai à dans la section Remix de la communauté ci-dessous.

Remix de la communauté

• @geoffrich_ avec Svelte: démonstration et code
• @GauteMeekOlsen avec Vue: démonstration + code
• @AnaestheticsApp avec Lit: demo et code