Marquee Duplo de Logos

Duas faixas de wordmarks correndo em direções opostas; o hover pausa a trilha e acende o logo.

CSS / TailwindClientesFácil

Preview ao vivoInterativo

<!DOCTYPE html>
<html lang="pt-BR">
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="styles.css" />
  </head>
  <body>
    <section class="palco">
      <p class="rotulo">Equipes que constroem com a gente</p>
      <div class="faixa">
        <div class="trilha t1">
          <span class="wm peso">VERTEX</span>
          <span class="wm serif">Lumina</span>
          <span class="wm largo">ATLAS</span>
          <span class="wm serif neg">Nórdica</span>
          <span class="wm baixo">pulso<i></i></span>
          <span class="wm preto">FORMA</span>
          <span class="wm serif ital">Órbita</span>
          <span class="wm largo">KAVO</span>
          <span class="wm peso">VERTEX</span>
          <span class="wm serif">Lumina</span>
          <span class="wm largo">ATLAS</span>
          <span class="wm serif neg">Nórdica</span>
          <span class="wm baixo">pulso<i></i></span>
          <span class="wm preto">FORMA</span>
          <span class="wm serif ital">Órbita</span>
          <span class="wm largo">KAVO</span>
        </div>
      </div>
      <div class="faixa">
        <div class="trilha t2">
          <span class="wm preto">PRISMA</span>
          <span class="wm serif ital">Duna</span>
          <span class="wm largo">ÂMBAR</span>
          <span class="wm serif">Fluxo</span>
          <span class="wm peso">VETOR</span>
          <span class="wm baixo">astra<i></i></span>
          <span class="wm serif neg">Mirá</span>
          <span class="wm largo">SOLAR</span>
          <span class="wm preto">PRISMA</span>
          <span class="wm serif ital">Duna</span>
          <span class="wm largo">ÂMBAR</span>
          <span class="wm serif">Fluxo</span>
          <span class="wm peso">VETOR</span>
          <span class="wm baixo">astra<i></i></span>
          <span class="wm serif neg">Mirá</span>
          <span class="wm largo">SOLAR</span>
        </div>
      </div>
    </section>
  </body>
</html>

Efeitos relacionados

carregando

Fileira de avatares sobrepostos que pipocam na tela e um contador que sobe até 2.400+ alunos.

Avatares com Contador

CSS / Tailwind

Fileira de avatares sobrepostos que pipocam na tela e um contador que sobe até 2.400+ alunos.

carregando

Grade de logos apagados em cinza que ganham cor e brilho dentro de um facho de luz que segue o mouse.

Grade de Logos Spotlight

CSS / Tailwind

Grade de logos apagados em cinza que ganham cor e brilho dentro de um facho de luz que segue o mouse.

carregando

Monogramas de clientes orbitando devagar em dois anéis ao redor de um selo central de confiança.

Logos em Órbita

CSS / Tailwind

Monogramas de clientes orbitando devagar em dois anéis ao redor de um selo central de confiança.