Cómo crear un componente Historias

Una descripción general fundamental de cómo crear una experiencia similar a la de las Historias de Instagram en la Web

Adam Argyle

En esta publicación, compartiré ideas sobre cómo crear un componente de Historias para web que sea adaptable, admita la navegación con teclado y funcione en navegadores.

Demostración

Si prefieres una demostración práctica de la creación de este componente de Historias por tu cuenta, consulta el codelab del componente Historias.

Si prefieres ver un video, aquí tienes una versión de YouTube de esta publicación:

Descripción general

Dos ejemplos populares de la UX de Historias son las de Snapchat y las de Instagram (sin mencionar las flotas). En términos generales de UX, las Historias suelen tener un patrón de navegación que se centra en el toque y solo en dispositivos móviles. varias suscripciones. Por ejemplo, en Instagram, los usuarios abren la historia de un amigo. y ver las fotos que tiene. Por lo general, hacen esto con muchos amigos tiempo. Al tocar el lado derecho del dispositivo, un usuario se adelanta a la página de ese amigo la siguiente historia. Al deslizar el dedo hacia la derecha, un usuario pasa a otro amigo. Un componente de historia es bastante similar a un carrusel, pero permite navegar por una un array multidimensional en lugar de uno unidimensional. Es como si hubiera un carrusel adentro cada carrusel. 🤯

Se visualizó un array multidimensional con tarjetas. De izquierda a derecha, hay una pila de tarjetas con bordes morados y, dentro de cada tarjeta, hay 1 o varias tarjetas con bordes cian. Lista en una lista.
1er carrusel de amigos
2.o "apilado" carrusel de historias
👍 Una lista en una lista, también conocida como array multidimensional

Elegir las herramientas adecuadas para el trabajo

Creo que este componente es bastante sencillo de compilar, gracias a varios y funciones esenciales de la plataforma web. Veamos cuáles son.

Cuadrícula de CSS

Nuestro diseño resultó ser no muy exigente para la cuadrícula de CSS, ya que cuenta con algunas y poderosas formas de manejar el contenido.

Diseño de amigos

Nuestro wrapper principal del componente .stories es una vista de desplazamiento horizontal que prioriza los dispositivos móviles:

.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;
}
Uso de las Herramientas para desarrolladores de Chrome Modo de dispositivo para resaltar las columnas creadas por la cuadrícula

Desglosemos ese diseño de grid:

  • Rellenamos de forma explícita el viewport en dispositivos móviles con 100vh y 100vw, y restringimos el tamaño en computadoras de escritorio
  • / separa nuestras plantillas de filas y columnas.
  • auto-flow se traduce como grid-auto-flow: column
  • La plantilla de flujo automático es 100%, que en este caso es el ancho de la ventana de desplazamiento.

En un teléfono celular, imagina que el tamaño de la fila es la altura de la vista del puerto y cada columna es el ancho del viewport. Continuando con las Historias de Snapchat y Ejemplo de Historias de Instagram. Cada columna tendrá la historia de un amigo. Queremos amigos las historias a seguir fuera del viewport, así que tenemos un lugar al cual desplazar. La cuadrícula creará todas las columnas que necesite para diseñar tu HTML para cada amigo. para crear un contenedor de desplazamiento dinámico y responsivo. Cuadrícula nos permitió centralizar todo el efecto.

Apilamiento

Las historias de cada amigo deben estar listas para la paginación. Como preparación para la animación y otros patrones divertidos, elegí una pila. Cuando hablo pila, me refiero a que miras hacia abajo en un no como si estuvieras mirando desde el costado.

Con la cuadrícula de CSS, podemos definir una cuadrícula de una sola celda (es decir, un cuadrado), en la que las filas y columnas comparten un alias ([story]) y, luego, cada elemento secundario se asigna a ese espacio de una sola celda 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;
  …
}

Así, nuestro HTML controla el orden de apilado y también mantiene todos los elementos en flujo. Observa que no tuvimos que hacer nada con el posicionamiento de absolute o z-index y no tuvimos que marcar la casilla correcta con height: 100% o width: 100%. La cuadrícula superior ya definió el tamaño del viewport de la imagen de la historia, por lo que ninguno de estos componentes tuve que pedirte que la llenes.

Puntos de ajuste de desplazamiento de CSS

La especificación de puntos de ajuste de desplazamiento de CSS un cinturón para bloquear elementos en la vista del puerto al desplazarse. Antes de que existieran estas propiedades de CSS, tuviste que usar JavaScript, y fue... difícil, por así decirlo. Finalizar la compra Presentamos los puntos de ajuste de desplazamiento de CSS de Sarah Drasner para ver un gran análisis de cómo usarlas.

Desplazamiento horizontal sin estilos scroll-snap-points y con ellos Sin ella, los usuarios pueden desplazarse libremente como de costumbre. Con él, el navegador se apoya suavemente sobre cada elemento.
elemento superior
.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;
}
El elemento superior con sobredesplazamiento define el comportamiento de ajuste.
niño
.user {
  display: grid;
  grid: [story] 1fr / [story] 1fr;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
Los publicadores secundarios habilitan la opción de ser un objetivo de ajuste.

Elegí los Puntos de ajuste de desplazamiento por varias razones:

  • Accesibilidad gratuita. La especificación de puntos de ajuste de desplazamiento establece que presionar la tecla Las teclas de flecha izquierda y flecha derecha deben moverse por los puntos de ajuste de forma predeterminada.
  • Una especificación en crecimiento. La especificación de Puntos de ajuste de desplazamiento tendrá nuevas funciones y mejoras todo el tiempo, lo que significa que mi componente Historias probablemente solo mejore de aquí en adelante.
  • Facilidad de implementación. Los Puntos de ajuste de desplazamiento están diseñados para de paginación horizontal centrado en el tacto.
  • Inercia libre del estilo de la plataforma. Todas las plataformas se desplazan y descansan con su estilo, a diferencia del normalizada, que puede tener un desplazamiento y un estilo en reposo sorprendentes.

Compatibilidad entre navegadores

Hicimos pruebas en Opera, Firefox, Safari y Chrome, además de iOS y Android. Aquí tienes un breve resumen de las funciones web donde encontramos diferencias en capacidades y compatibilidad.

Sin embargo, teníamos CSS que no se aplicaban, por lo que algunas plataformas actualmente no tienen experiencia en la UX. optimizaciones. Disfruté no tener que administrar estas funciones y tengo confianza de que lleguen a otros navegadores y plataformas.

scroll-snap-stop

Los carruseles fueron uno de los principales casos de uso de UX que impulsó la creación de la Especificación de puntos de ajuste de desplazamiento de CSS A diferencia de las Historias, un carrusel no siempre tiene que detenerse en cada imagen después de que el usuario interactúa con ellas. Puede estar bien o te recomendamos que recorrer rápidamente el carrusel. Por otro lado, es mejor navegar por las historias una por una, Eso es exactamente lo que proporciona scroll-snap-stop.

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

Al momento de escribir esta publicación, scroll-snap-stop solo es compatible con aplicaciones basadas en navegadores. Finalizar la compra Compatibilidad con navegadores para ver las actualizaciones. Sin embargo, no es un obstáculo. Solo significa que, en los navegadores no compatibles, los usuarios pueden saltarse amigos por error. Así que los usuarios solo tendrán que ser más cuidadosos o necesitaremos escribir JavaScript para asegurarnos de que un amigo omitido no se marque como visto.

Obtén más información en el spec si estás le interesa.

overscroll-behavior

¿Alguna vez te has desplazado por una ventana modal cuando, de repente, comenzar a desplazarte por el contenido detrás de la ventana modal? overscroll-behavior permite al desarrollador atrapar ese desplazamiento y nunca permitirlo abandonarlos. Es lindo para todo tipo de ocasión. El componente Mis historias lo usa para evitar que los gestos de desplazamiento y los deslizamientos adicionales salgan de la este componente.

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

Safari y Opera eran los 2 navegadores que no admitir esto, y eso es totalmente bien. Esos usuarios tendrán una experiencia de sobredesplazamiento como a la que están acostumbrados. y es posible que nunca noten esta mejora. Personalmente, soy un gran fanático y me gusta lo que incluye casi todas las funciones de sobredesplazamiento que implemento. Es un adición inofensiva que solo puede conducir a una mejor UX.

scrollIntoView({behavior: 'smooth'})

Cuando un usuario presiona o hace clic y llega al final del conjunto de historias de un amigo, es hora de pasar al siguiente amigo en el conjunto de puntos de ajuste de desplazamiento. Con en JavaScript, pudimos hacer referencia al próximo amigo y solicitar que se desplazado hasta la vista. La compatibilidad con los aspectos básicos es excelente. todos los navegadores lo desplazaste hasta verlo. Sin embargo, no todos los navegadores lo hicieron 'smooth'. Esto solo significa se desplaza a la vista en lugar de ajustarse.

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

Safari era el único navegador que no era compatible con behavior: 'smooth' aquí. Finalizar la compra Compatibilidad con navegadores para ver las actualizaciones.

Actividad práctica

Ahora que sabes cómo lo hice, ¿cómo lo harías? Diversifiquemos nuestras diferentes enfoques y aprender todas las formas de construir en la web. Crea una falla, twittea tu versión y la agregaré a la sección Remixes de la comunidad a continuación.

Remixes de la comunidad