Hola, en este video voy a recrear una animación que Brendi ya hizo para su landing page de su nuevo curso. Se trata de algunos chips que se mueven de forma infinita, en este ejemplo también coloco 4 filas, pero puedes modificar el código que te dejo aquí, para ajustarlo a tu propio diseño.

🍿 Vamos con el HTML

Comencemos entonces con el maquetado HTML.

<article id="scroller">
<section>
      <span>
    Pelusina
  </span>
    <span>
    🤖
  </span>
    <span>
    JS
  </span>
    <span>
    🍿
  </span>
    <span>
    React
  </span>
    <span>
    🤯
  </span>
      <span>
    TailwindCSS
  </span>
        <span aria-hidden>
    Pelusina
  </span>
    <span aria-hidden>
        🤖
  </span>
   <span aria-hidden>
    JS
  </span>
     <span aria-hidden>
       🍿
  </span>
     <span aria-hidden>
    React
  </span>
     <span aria-hidden>
       🤯
  </span>
       <span aria-hidden>
    TailwindCSS
  </span>
</section>
</article>

Observa que estoy repitiendo los elementos para lograr el truco, tu puedes poner los elementos que prefieras, <img> por ejemplo, por ahora yo estoy bien con <span> .

🪮 Vamos con los estilos

En el CSS si tenemos varias cosas que mencionar.

html{
  background:radial-gradient(black 30%, #0e0e11);
  height:100%;
}

body{
  overflow-x:hidden;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  height:100%;
  justify-content:center;
  align-items:center;
  gap:8px;
}

article{
  border:2px solid transparent;
  max-width:60%;
  mask-image: linear-gradient(to right,
    transparent 0%,
    white 30%,
    white 70%,
    transparent 100%
  );
}

section {
  min-width:fit-content;
  display:flex;
  gap:16px;
  animation: scroll_left 20s linear infinite;
  padding:0 8px;
}

section:hover{
  animation-play-state: paused;
}

span{
  color:#bfbfbf;
  font-family:sans-serif;
  padding: 6px 22px;
  border-radius:50px;
  background:#0e0e11;
  border:1px solid #323232;
  display:grid;
  place-items:center;
  transition:all .3s;
}

span:hover{
  background:rgba(255,255,255,0.2);
}

@keyframes scroll_left{
  to{
    transform: translateX(-50%);
  }
}

@keyframes scroll_right{
  from{
    transform:translatex(-50%);
  }
  to{
    transform: translateX(0%);
  }
}

Observa los selectores, para hacer el ejemplo más simple he usado selectores de etiqueta. También he colocado dos animaciones, una que va rumbo el este y otra al oeste. 🤓

Con esto la animación ya debería estar ahí. Pero ahora vamos a multiplicarlo todo con JS.

🤖 Ahí viene lo bueno

Es hora de usar un poquitito de JS para multiplicarlo todo.

const DURATIONS = ["20s", "26s", "30s"]

const second = scroller.cloneNode(true)
second.id="clone"
const section1 = second.querySelector('section')
section1.style.animationName='scroll_right';
section1.style.animationDuration = DURATIONS[0];
second.querySelector('section').style.animationName='scroll_right'
document.body.appendChild(second);

const third = scroller.cloneNode(true)
third.id="third"
const section2 = third.querySelector('section')
section2.style.animationDuration = DURATIONS[1];
document.body.appendChild(third);

const forth = scroller.cloneNode(true)
forth.id="forth"
const section3 = forth.querySelector('section')
section3.style.animationDuration = DURATIONS[2];
section3.style.animationName='scroll_right'
document.body.appendChild(forth);

Observa que utilizo diferentes direcciones aquí para crear un mejor efecto y que no se muevan igual. ¿Genial no?

Ojalá esto te sea útil. Nos vemos en el siguiente.

Abrazo. Bliss. 🤓

Enlaces relacionados

Código