Cómo recrear una ingeniosa animación de Netflix en CSS

El diseño de la página de navegación de Netflix se ha mantenido bastante similar desde hace algunos años. Un componente fundamental es el control deslizante de vista previa que permite a los usuarios desplazarse por el contenido y desplazarse sobre los elementos para ver una vista previa.

Una característica única de la interfaz de usuario es su comportamiento de desplazamiento. Cuando la vista previa de un programa se expande al pasar el mouse, las tarjetas al lado se empujan hacia afuera para que no se superpongan.

Como esto:

¡Podemos hacer esto en CSS! Pecado JavaScript. Sin dependencias. CSS sencillo. Pero antes de entrar en cualquier código, esto es exactamente lo que queremos hacer:

1. La tarjeta sobre la que se coloca el cursor debe expandirse manteniendo su relación de aspecto.
2. Cuando se pasa el cursor sobre una carta, las otras cartas no deben cambiar de tamaño y moverse hacia afuera para que no se superpongan entre sí.
3. Todas las tarjetas deben permanecer verticalmente centradas entre sí.

¿Suena bien? Ahora entremos en el código.

HTML y elementos flexibles

Configuramos una fila de imágenes que representan las vistas previas de videos de Netflix. Eso incluye:

• Un .containerelemento padre con varios .itemelementos dentro.
• Cada .itemelemento consta de una imagen envuelta en una etiqueta de anclaje.
• Convertirse .containeren un contenedor flexible que alinea los elementos en una fila.
• Configurar el comportamiento flexible de la .itemclase para que ocupe el mismo espacio en la fila

Expandir un elemento al pasar el mouse

Nuestro siguiente paso es hacer que un elemento se expanda cuando se coloca sobre él. Podríamos hacer esto animando el elemento width, pero eso afectaría el flujo del documento y haría que los hermanos del elemento suspendido se redujeran; Además, widthse sabe que animar la propiedad es deficiente para el rendimiento en algunos casos.

Para evitar comprimir al hermano del elemento sobre el que se encuentra, vamos a animar la transformpropiedad (específicamente, su scale()función). Esto no afectará el flujo de documentos de la misma manera width.

Mover a los hermanos hacia afuera

Lograr que los hermanos de un elemento suspendido se alejan del elemento suspendido es la parte complicada de todo este asunto. Una característica de CSS que tenemos a nuestra disposición es el combinador de hermanos general. Esto nos permite seleccionar todos los elementos hermanos que se colocan después del elemento sobre el que se desplaza el cursor.

Pasaremos a la función transformde la propiedad translateX()para mover cosas. Nuevamente, la animación transformes mucho mejor que otras propiedades que afectan el flujo de documentos, como los márgenes y el relleno.

Dado que hemos configurado un elemento para que aumente de tamaño un 150% al pasar el mouse, la traducción debe establecerse en un 25%. Esa es la mitad del espacio adicional que ocupa el elemento suspendido.

.item:hover ~ .item {  transform: translateX(25%);}

Eso maneja mover cosas hacia la derecha, pero ¿cómo podemos traducir los elementos de la izquierda? Dado que el combinador de hermanos general solo se aplica a los hermanos ubicados después de un selector determinado (sin ir “hacia atrás”), necesitaremos otro enfoque.

Una forma es agregar una regla de desplazamiento adicional en el propio contenedor principal. Aquí está el plan:

• Al pasar el cursor sobre el contenedor principal, mueva todos los elementos dentro de ese contenedor hacia la izquierda.
• Utilice el combinador de hermanos general para hacer que los elementos colocados después del elemento suspendido se muevan hacia la derecha.
• Sea súper específico para que un elemento sobre el que se encuentre no se traduzca como el resto de los elementos.

Estamos asumiendo que su documento utiliza un modo de escritura de izquierda a derecha. Si desea utilizar este efecto en un contexto de derecha a izquierda, deberá configurar todos los elementos dentro del contenedor exterior suspendido para que se muevan hacia la derecha y usar el combinador general de hermanos para mover todos los elementos seleccionados hacia la izquierda.

¡Hora de la demostración!

Una pequeña cosa a tener en cuenta: esta versión final utiliza :focuspseudoclases :focus-withinpara admitir la navegación con el teclado. El ejemplo de Netflix no lo usa, pero creo que es un buen toque para la accesibilidad.

¡Ahí lo tenemos! Sí, podríamos haber usado detectores de eventos de JavaScript en lugar de reglas de desplazamiento de CSS, y eso posiblemente podría ser mejor en términos de mantenibilidad y legibilidad. ¡Pero a veces es divertido ver hasta dónde nos puede llevar CSS!