Cómo crear un texto en movimiento en un sitio web

Un texto en movimiento, también conocido como marquee, es un elemento web en el que el texto u otra información se desplaza continuamente por la pantalla. Este efecto fue muy popular en el diseño web de hace algunos años. Era especialmente común en los sitios web de principios de los años 2000, donde las noticias, anuncios y diferentes mensajes literalmente «corrían» por la página.

Hoy en día, los textos en movimiento son mucho menos frecuentes. El diseño web moderno suele favorecer una presentación más tranquila de la información, mientras que las animaciones CSS y JavaScript se utilizan para crear elementos dinámicos. Sin embargo, el marquee no ha desaparecido por completo. Todavía se puede encontrar en sitios de noticias, tiendas online y diferentes widgets.

En algunos casos, el texto en movimiento puede ser realmente útil. Por ejemplo, puede utilizarse para llamar la atención sobre un mensaje importante, mostrar una noticia breve o colocar una gran cantidad de información en un espacio limitado.

En este artículo veremos dos formas de crear un texto en movimiento: un método moderno utilizando CSS y el antiguo, pero todavía conocido, elemento HTML <marquee>

Crear un texto en movimiento con CSS

Empecemos con el método moderno. No necesitaremos JavaScript: solo HTML y CSS.

Crearemos un contenedor que ocultará el texto cuando salga de sus límites:

<div class="ticker">
    <div class="ticker__track">
        <span>Important information — Website news — Discounts — New arrivals</span>
        <span>Important information — Website news — Discounts — New arrivals</span>
    </div>
</div>

Ahora añadimos los estilos CSS:

.ticker {
    overflow: hidden;
    white-space: nowrap;
}

.ticker__track {
    display: inline-flex;
    width: max-content;
    animation: ticker 20s linear infinite;
}

.ticker__track span {
    padding-right: 50px;
}

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

Veamos cómo funciona.

El elemento .ticker tiene la propiedad overflow: hidden. Esto evita que el texto que sale fuera del contenedor siga siendo visible.

La propiedad white-space: nowrap impide que el texto pase a una nueva línea.

El texto se encuentra dentro de .ticker__track, que utiliza width: max-content para que su ancho se ajuste a su contenido. Después aplicamos una animación CSS:

animation: ticker 20s linear infinite;

Aquí, 20s representa la duración de un ciclo de la animación. Cuanto menor sea este valor, más rápido se moverá el texto.

La parte más importante de este método es que el texto aparece dos veces dentro del elemento:

<span>Important information — Website news — Discounts — New arrivals</span>
<span>Important information — Website news — Discounts — New arrivals</span>

Esto permite crear un movimiento continuo. Cuando la primera copia desaparece completamente por el lado izquierdo, la segunda ocupa su lugar. Una vez finalizada la animación, el ciclo vuelve a comenzar.

De esta manera evitamos una pausa o un salto visible entre las repeticiones.

Cómo cambiar la velocidad

La velocidad se controla mediante la duración de la animación:

animation: ticker 20s linear infinite;

Por ejemplo, podemos hacer que el texto se mueva más rápido:

animation: ticker 10s linear infinite;

O más lentamente:

animation: ticker 40s linear infinite;

Cuanto mayor sea el valor de tiempo, más lentamente se moverá el texto.

Pausar la animación al pasar el cursor

En algunos casos puede ser útil detener el texto en movimiento cuando el usuario coloca el cursor sobre él. Esto resulta especialmente práctico cuando el texto es largo y el usuario necesita más tiempo para leerlo.

Solo tenemos que añadir:

.ticker:hover .ticker__track { 
  animation-play-state: paused; 
}

Ahora la animación se detendrá cuando el usuario coloque el cursor sobre el texto y continuará cuando lo retire.

Ejemplo en jsfiddle – https://jsfiddle.net/igorrybalko/swo25bug

El método antiguo: HTML <marquee>

Y ahora, un poco de historia de la web.

Antes de que las animaciones CSS se utilizaran ampliamente, los desarrolladores solían recurrir a un elemento HTML especial llamado <marquee> para crear textos en movimiento:

<marquee> Important information — Website news — Discounts — New arrivals </marquee>

El navegador creaba automáticamente un texto en movimiento a partir de este elemento.

El elemento disponía de diferentes atributos que permitían controlar su comportamiento. Por ejemplo, la dirección del movimiento podía cambiarse mediante el atributo direction:

<marquee direction="right"> This text moves to the right </marquee>

De forma predeterminada, el texto se mueve de derecha a izquierda.

También era posible cambiar la velocidad mediante scrollamount:

<marquee scrollamount="10"> Fast scrolling text </marquee>

Y se podía especificar cuántas veces debía repetirse la animación:

<marquee loop="3"> This text will appear three times </marquee>

También era posible detener el movimiento cuando el usuario colocaba el cursor sobre el texto:

<marquee onmouseover="this.stop()" onmouseout="this.start()" > Hover over the text </marquee>

Sin embargo, hay un detalle importante: <marquee> es un elemento HTML obsoleto y no debería utilizarse en proyectos nuevos.

El HTML moderno debería encargarse de describir la estructura de la página, mientras que los efectos visuales y las animaciones es mejor implementarlos mediante CSS.

¿Qué método deberías elegir?

Si estás creando un sitio web nuevo, prácticamente siempre deberías utilizar una animación CSS.

Este método tiene varias ventajas:

• no requiere JavaScript;
• el comportamiento se puede controlar fácilmente mediante CSS;
• es posible ajustar la velocidad y la dirección;
• se puede pausar la animación;
• el aspecto se puede adaptar fácilmente al diseño del sitio;
• el código se ajusta mejor a las prácticas modernas de desarrollo web.

Hoy en día, <marquee> tiene principalmente un interés histórico. Sin embargo, conocer este elemento puede ser útil. Si encuentras un sitio web antiguo o un proyecto heredado que lo utiliza, podrás entender de dónde procede ese texto en movimiento.

No olvides la accesibilidad

El texto en movimiento también tiene algunos inconvenientes. Una animación constante puede dificultar la lectura de la información y algunos usuarios pueden sentirse incómodos con los elementos que se mueven en la pantalla.

Por eso, en un sitio web real es recomendable tener en cuenta la configuración del sistema prefers-reduced-motion. Esta opción permite desactivar o reducir las animaciones para los usuarios que prefieren tener menos movimiento en la interfaz.

Por ejemplo:

@media (prefers-reduced-motion: reduce) {
    .ticker__track {
        animation: none;
    }
}

En este caso, los usuarios que tengan activada la opción para reducir el movimiento verán el texto sin animación.

Conclusión

El texto en movimiento es uno de esos elementos del diseño web que nos recuerda los primeros años de Internet. Antes estaba presente prácticamente en todas partes, mientras que hoy se utiliza de una manera mucho más cuidadosa.

Sin embargo, la idea básica sigue siendo útil. Para noticias breves, anuncios y otros pequeños mensajes informativos, un texto en movimiento puede ser una solución bastante práctica.

Para los sitios web modernos, la animación CSS es la mejor opción. No requiere bibliotecas adicionales y permite controlar completamente el movimiento del texto. El elemento <marquee>, por otro lado, es mejor dejarlo como parte de la historia del desarrollo web o utilizarlo únicamente cuando sea necesario mantener código antiguo.