Se trata de una animación de desplazamiento infinito que se utiliza a menudo para mostrar una lista de logotipos de empresas asociadas en un bucle.

Vista previa

Casos de uso y características

• Relaciones públicas: muestre su confiabilidad mostrando una lista de logotipos de patrocinadores y empresas asociadas sin interrupción.
• Vivacidad visual: desplaza la información de la campaña y la nueva información en el texto para atraer la atención del usuario.
• Infinite Loop: duplica y posiciona el contenido y crea un bucle sin interrupciones con animaciones CSS para dar la ilusión de desplazarte eternamente.

Puntos claves del diseño y UX (Design & UX)

• Desplazamiento suave: al usar CSS animation, el desplazamiento es más fluido y tiene mejor rendimiento que JavaScript.
• Pausa al pasar el mouse: En caso de que el usuario quiera ver más de cerca el contenido, la animación se pausa al pasar el mouse (animation-play-state: paused).

Cómo personalizar (Guía de personalización)

• Ajuste de velocidad: Puede cambiar la velocidad de desplazamiento aumentando o disminuyendo 20s en CSS animation: marquee 20s linear infinite;.
• Cambiar contenido: Puedes cambiar libremente el logotipo y los elementos de texto.Asegúrese de que el contenido de los dos juegos (original y duplicado) sea el mismo.

Código de implementación (Implementación)

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