Animação de carrossel de rolagem infinita apenas com CSS

Introdução#

Adoramos JavaScript, é claro. Mas é sempre divertido ver o que podemos alcançar apenas com CSS - especialmente quando se trata de animações, já que as animações em CSS são frequentemente "menos pesadas" do que as animações em JavaScript.

Neste post, vou mostrar como criar uma animação de carrossel de rolagem infinita com efeito de pausa ao passar o rato, usando apenas CSS. Aqui está uma prévia do que vamos construir:

Criar uma fila de cartões#

Primeiro, vamos criar a estrutura básica do nosso carrossel. Considere uma fila de cartões:

Parece bom, certo? Os cartões podem ser os teus banners elegantes, imagens de produtos, ou qualquer coisa que queiras exibir no teu carrossel.

Duplicar os cartões#

Como queremos que o carrossel seja infinito, ele deve estar conectado de ponta a ponta. Instintivamente, podemos tentar repetir os cartões:

Confere o resultado:

Apenas o primeiro conjunto de cartões está visível. Se verificares o HTML, verás que o segundo conjunto de cartões está oculto e segue o primeiro conjunto.

Animar o carrossel#

Hora de animar o carrossel! Como temos dois conjuntos de cartões conectados, podemos animar o carrossel transformando os grupos de cartões. Aqui está como:

Ainda falta um último toque: pausar a animação quando passares o rato sobre o carrossel. Isso dará aos utilizadores a oportunidade de ver o conteúdo mais claramente. Como temos dois conjuntos de cartões, precisamos de pausar ambos os grupos quando passamos o rato sobre o carrossel:

É isso! 🎊 Agora, o carrossel irá pausar quando passares o rato por cima dele.

Considerações finais#

O CSS é poderoso, e é sempre divertido explorar o que podemos conseguir com ele. Existem também outras propriedades de CSS como scroll-snap-type e scroll-snap-align que podem te ajudar a criar um carrossel interativo. Boas codificações! 🚀