Esta é uma animação de rolagem infinita que costuma ser usada para exibir uma lista de logotipos de empresas parceiras em um loop.

Visualização

Casos de uso e recursos

• Relações Públicas: Mostre sua confiabilidade exibindo uma lista de logotipos de patrocinadores e empresas parceiras sem interrupção.
• Vivacidade visual: role as informações da campanha e novas informações no texto para atrair a atenção do usuário.
• Loop infinito: duplique e posicione o conteúdo e faça um loop contínuo com animações CSS para dar a ilusão de rolagem contínua.

Pontos-chave de design e UX (Design & UX)

• Rolagem suave: Ao usar a animation CSS, a rolagem é mais suave e tem melhor desempenho que o JavaScript.
• Pausa ao passar o mouse: Caso o usuário queira dar uma olhada mais de perto no conteúdo, a animação é pausada ao passar o mouse (animation-play-state: paused).

Como personalizar (Guia de Personalização)

• Ajustando a velocidade: Você pode alterar a velocidade de rolagem aumentando ou diminuindo 20s em CSS animation: marquee 20s linear infinite;.
• Alterar conteúdo: Você pode alterar livremente o logotipo e os elementos de texto.Certifique-se de que o conteúdo dos dois conjuntos (original e duplicado) seja o mesmo.

Código de implementação (Implementação)

<div class="w-full overflow-hidden bg-white dark:bg-zinc-950 py-10">
<style>
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }
  .animate-marquee {
    animation: marquee 20s linear infinite;
  }
  .animate-marquee:hover {
    animation-play-state: paused;
  }
</style>
<div class="flex w-[200%] animate-marquee gap-8 items-center">
  <!-- First set -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
  <!-- Duplicate set for infinite effect -->
  <div class="flex-1 flex justify-around items-center font-bold text-2xl text-gray-300 dark:text-zinc-700">
    <span>LOGO 1</span>
    <span>LOGO 2</span>
    <span>LOGO 3</span>
    <span>LOGO 4</span>
    <span>LOGO 5</span>
  </div>
</div>
</div>