Animación de carrusel de desplazamiento infinito solo con CSS

Introducción#

Nos encanta JavaScript, por supuesto. Pero siempre es divertido ver lo que podemos lograr solo con CSS, especialmente cuando se trata de animaciones, ya que las animaciones en CSS suelen ser "menos pesadas" que las animaciones en JavaScript.

En este artículo, te mostraré cómo crear una animación de carrusel de desplazamiento infinito con efecto de pausa al pasar el ratón usando solo CSS. Aquí hay una vista previa de lo que vamos a construir:

Crear una fila de tarjetas#

Primero, creemos la estructura básica de nuestro carrusel. Considera una fila de tarjetas:

Se ve bien, ¿verdad? Las tarjetas pueden ser tus banners elegantes, imágenes de productos o cualquier cosa que quieras mostrar en tu carrusel.

Duplicar las tarjetas#

Ya que queremos que el carrusel sea infinito, debe estar conectado de extremo a extremo. Instintivamente, podemos intentar repetir las tarjetas:

Mira el resultado:

Solo es visible el primer conjunto de tarjetas. Si verificas el HTML, verás que el segundo conjunto de tarjetas está oculto y sigue al primer conjunto.

Animar el carrusel#

¡Es hora de animar el carrusel! Como tenemos dos conjuntos de tarjetas conectados, podemos animar el carrusel transformando los grupos de tarjetas. Así es cómo:

Todavía nos queda un último toque por añadir: pausar la animación cuando pasemos el ratón sobre el carrusel. Esto dará a los usuarios la oportunidad de ver el contenido con más claridad. Como tenemos dos conjuntos de tarjetas, necesitamos pausar ambos grupos al pasar el ratón sobre el carrusel:

¡Eso es todo! 🎊 Ahora el carrusel se pausará al pasar el ratón por encima.

Reflexiones finales#

CSS es poderoso y siempre es divertido explorar lo que podemos lograr con él. También existen otras propiedades de CSS como scroll-snap-type y scroll-snap-align que pueden ayudarte a crear un carrusel interactivo. ¡Feliz codificación! 🚀