Softonic

Generador de Texto Desplazable

Paso 1 / 2
Siguiente

Los titulares desplazables son cómo las barras de anuncios, los tickers de acciones y los banners de eventos transmiten mucha información en una franja estrecha de la pantalla. Este generador recrea el clásico efecto HTML <marquee> con una animación CSS @keyframes y transform: translateX() puros, de modo que la técnica sigue funcionando en todos los navegadores modernos sin la etiqueta obsoleta. Elige un mensaje, ajusta la velocidad en segundos por bucle, establece colores y tamaño de fuente, y previsualiza el ticker en vivo antes de reconstruirlo con el CSS que se muestra a continuación.

Cómo construir un banner desplazable

  1. 1

    Escribe el mensaje

    Ingresa el titular. Las líneas cortas (4-10 palabras) se leen mejor en una franja en movimiento.

  2. 2

    Elige la velocidad

    Menos segundos = desplazamiento más rápido. 30-60 s por bucle completo funciona para tickers de estilo noticioso.

  3. 3

    Establece colores y tamaño

    Elige un primer plano para el texto, un fondo para la franja y un tamaño de fuente que coincida con la altura de tu encabezado.

  4. 4

    Vista previa en vivo

    La demostración se anima en tiempo real para que puedas juzgar la legibilidad antes de publicarla.

  5. 5

    Reconstrúyelo en CSS

    Copia el patrón `@keyframes` y `transform: translateX()` que se muestra abajo en tu propia hoja de estilos para reproducir el ticker en tu sitio.

Por qué animación CSS en lugar de <marquee>

La etiqueta <marquee> fue desaprobada en HTML5 y está marcada por WHATWG como obsoleta. Los navegadores aún la renderizan por ahora, pero las herramientas de accesibilidad y los validadores se quejan, y pierdes un control fino sobre la suavidad y el bucle. Una animación transform: translateX() dentro de overflow: hidden da un comportamiento visual idéntico con herramientas modernas.

Ajustando la velocidad

El tiempo de recorrido depende tanto de la duración como del ancho total. Una regla general para un viewport de 1200 px:

Duración Sensación Uso típico
10-20 s Rápido, atención Ventas flash, alertas urgentes
30-45 s Ticker de noticias Resultados en vivo, barras de titulares
60-90 s Ambiental Señalización de lugares, salas de conferencias
120 s + Apenas en movimiento Decorativo, banners de marcas de lujo

Lista de verificación de accesibilidad

  • Envuelve la franja en role="marquee" o aria-live="off" para que los lectores de pantalla no vuelvan a anunciar el mensaje en cada bucle.
  • Respeta el movimiento reducido con @media (prefers-reduced-motion: reduce) { animation: none; } y muestra el texto de forma estática.
  • Mantén la relación de contraste al menos 4.5:1 entre el texto y el fondo; el texto en movimiento es más difícil de leer que el estático.
  • Nunca pongas información crítica (avisos legales, precios, mensajes de error) solo dentro de una franja desplazable.

Preguntas frecuentes

No. La vista previa es un <div> con overflow: hidden y una animación CSS @keyframes que mueve el span interno con translateX. Se valida como HTML5 moderno.

Agrega animation-play-state: paused en el selector de hover del contenedor. Algunos usuarios encuentran esto más amigable que un bucle constante.

Sí. Cambia el valor final de @keyframes de translateX(-100%) a translateX(100%) y comienza desde -100% para invertir la dirección. Útil para idiomas RTL.

No. Las transformaciones CSS se ejecutan en la GPU y el texto es HTML simple dentro del DOM, por lo que los rastreadores lo leen normalmente y la animación no bloquea el hilo principal.

Todo permanece en tu navegador mientras lo previsualizas. Nada se sube o registra.

Herramientas relacionadas

Generador de nombres de ciudades

Genera nombres ficticios de ciudades, pueblos, aldeas y capitales para worldbuilding, mapas, juegos, historias y datos de prueba, con notas breves para cada resultado.

Símbolo Menor o Igual

Copia el signo ≤ y símbolos de comparación matemática relacionados. Incluye Unicode, entidades HTML y marcado LaTeX para hojas de cálculo, documentos y páginas web.

Generador de texto glitch

Crea texto glitch de estilo Zalgo con marcas Unicode combinantes. Elige la intensidad, previsualiza variantes y copia texto corrupto para perfiles, memes o publicaciones de terror.

Generador de nombres de usuario

Genera ideas de nombres de usuario a partir de una palabra base, con números y separadores opcionales. Útil para cuentas nuevas, gamertags y perfiles alternativos.

Generador de Nombres de Dominio

Genera ideas de nombres de dominio a partir de una palabra clave: prefijos, sufijos, letras dobles y terminaciones numéricas en seis TLD habituales.

Convertidor de texto amigable con la dislexia

Reorganiza el texto pegado en párrafos cortos y líneas de unos 72 caracteres para facilitar la lectura. Copia el resultado en cualquier documento, correo o editor.

Herramienta disponible en otros idiomas