Cómo hacer una animación marquee infinita con html y css
El efecto marquee es una animación que crea un desplazamiento de elementos (texto o imágenes) de un lado a otro en una página web. Ahora bien, el efecto marquee infinito es la misma animación corriendo continuamente, donde los elementos se repiten una y otra vez. Esta animación no sólo hace que los elementos de un sitio web se vean increíbles, sino que también crea dinamismo y movimiento. Si estás leyendo esto es porque seguramente has la has visto y quieres usarla en alguno de tus proyectos. Entonces vamos a crearla paso a paso!
Probablemente habías escuchado antes de la etiqueta <marquee/> en hmtl. Si no lo has hecho, es básicamente un elemento que crea este efecto de desplazamiento que estamos buscando. La mala noticia es que esta etiqueta está descontinuada en las nuevas versiones de html (como html5), por lo que no es recomendable usarlo en tus proyectos.
La buena noticia es que este efecto se puede recrear fácilmente usando html y animaciones css. Primero vamos a crear el efecto marquee como en la etiqueta de html y después de la vamos dar un efecto de continuidad para que el desplazamiento parezca infinito.
Archivo HTML
Para empezar, en tu archivo o sección html, crea un <div/> y asignale la clase marquee__element. Este elemento será el contenedor de la animación. Ahora crea un elemento <ul/> con 10 o más elementos <li/> dentro. Utiliza el texto que quieras para llenar estos elementos, yo usé nombres de dulces. Además agregué a mi texto los símbolos unicode de html (espacio) y • (punto) para dividir las palabras de la lista. Puedes usar guiones, cualquier otro símbolo u omitirlos.
Archivo CSS
En tu archivo o sección css ajusta el width de la clase marquee al 100% para que la animación empiece en un costado de la página y termine en el otro. Si quieres que el contenedor de tu animación tenga un tamaño distinto, sustituye el valor en width. En este caso será necesario que especifiques el atributo overflow: hidden; para que sólo se muestren los elementos que están dentro del contenedor al crear el efecto de desplazamiento.
Animaciones CSS
Ahora vamos a crear un efecto de desplazamiento horizontal infinito. Para esto vamos a utilizar animaciones con keyframes en css.
En la clase marquee__content agrega el atributo animation. Este atributo va a contener el nombre de nuestra animación, la duración en segundos y el efecto linear e infinito. animation: scrolling 10s linear infinite;
Ahora crea el keyframe llamado scrolling, donde vamos a aplicar el atributo de transformación de elemento: translateX (que mueve el elemento en el eje X en un porcentaje en relación a su ancho). Este atributo va crear el efecto de desplazamiento de nuestra lista de derecha a izquierda.
Hasta este punto, tenemos un efecto que funciona de la misma manera que la etiqueta <marquee/> de html. Ahora vamos a crear el efecto continuo infinito. Para este paso va a ser necesario llenar el espacio vacío que se genera entre la última y la primera palabra de nuestra lista. Vamos a hacer que la primera palabra siga inmediatamente a la última en cada ocasión.
En el archivo html, repite los elementos <li/> de las primeras 5 palabras. Toma en cuenta que la cantidad de elementos que debes repetir depende del width de tus clases marquee y marquee__item. Si el ancho de tu marquee es muy grande y los elementos marquee__item son muy cortos, repite la lista completa, como en mi caso.
Ahora tenemos en total 20 elementos <li/> en nuestra lista, en lugar de los 10 que teníamos inicialmente. Y listo! Ya tenemos un efecto marquee infinito para usar en cualquier proyecto web.
También puedes utilizar imágenes o cualquier otro elemento con esta animación, siempre y cuando ajustes los tamaños de tus marquee__item y las repeticiones de tu lista. Puedes integrar esta animación en cualquier proyecto. Yo lo implementé en un proyecto hecho con Vue.js/Nuxt, pero lo puedes usar también en tus archivos html y css.
Gracias por leer! Espero que este artículo te haya servido para recrear el efecto marquee infinito en tus proyectos. Si quieres ver el código completo visita mi Codepen o checa el código aquí abajo.
