Una descripción general fundamental de cómo crear una experiencia similar a la de las Historias de Instagram en la Web
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.
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.](https://web.developers.google.cn/static/articles/building/a-stories-component/image/visualized-multi-dimensio-bca9c1e40444a.png?authuser=7&hl=es-419)
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;
}
Desglosemos ese diseño de grid
:
- Rellenamos de forma explícita el viewport en dispositivos móviles con
100vh
y100vw
, y restringimos el tamaño en computadoras de escritorio /
separa nuestras plantillas de filas y columnas.auto-flow
se traduce comogrid-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.
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.
.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; }
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
- @geoffrich_ con Svelte: demo en código
- @GauteMeekOlsen con Vue: demostración + código
- @AnaestheticsApp con Lit: demo en código