Español

css
animación
desplazamiento-infinito
carrusel

Animación de carrusel de desplazamiento infinito solo con CSS

Crea una animación de carrusel de desplazamiento infinito con pausa al pasar el ratón usando solo CSS. No se requiere JavaScript.

Gao

Founder

8/11/2024

Deja de perder semanas en la autenticación de usuarios

Lanza aplicaciones seguras más rápido con Logto. Integra la autenticación de usuarios en minutos y concéntrate en tu producto principal.

Comenzar

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! 🚀

Introducción

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:

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

Introducción#

Crear una fila de tarjetas#

Duplicar las tarjetas#

Animar el carrusel#

Reflexiones finales#

Introducción#

Crear una fila de tarjetas#

Duplicar las tarjetas#

Animar el carrusel#

Reflexiones finales#

Introducción

Crear una fila de tarjetas

Duplicar las tarjetas

Animar el carrusel

Reflexiones finales

Introducción

Crear una fila de tarjetas

Duplicar las tarjetas

Animar el carrusel

Reflexiones finales