Usa el Vista Previa de Texto Deslizante gratuito abajo: tus datos nunca salen de tu navegador, todo el trabajo ocurre en tu dispositivo y no se sube a ningún servidor.
El regreso del texto deslizante
El texto deslizante, antes conocido como marquesina, fue un elemento básico de las primeras páginas web: una línea de texto que se deslizaba por la pantalla, normalmente para anunciar algo. Pasó de moda porque se usaba en exceso, era rápido y difícil de leer. Ha vuelto en una forma más tranquila, como una animación CSS, para anuncios, tickers y banners. La antigua etiqueta HTML marquee está obsoleta y no debe usarse. La versión moderna usa una animación CSS que mueve el texto hacia un lado, y está totalmente bajo tu control. La herramienta de arriba crea esa versión moderna: escribe tu texto, ajusta la velocidad, la dirección, el espacio y el tamaño, y copia el código.
El atractivo es simple. Un banner deslizante llama la atención sin ocupar mucho espacio, y puede llevar un mensaje que cambia a menudo, como una oferta, una advertencia o una actualización en vivo. El peligro es igual de simple. El texto deslizante es difícil de leer, porque las palabras se mueven mientras el lector intenta seguirlas, y es difícil de ignorar, porque el movimiento atrae la mirada incluso cuando el usuario intenta leer otra cosa. Usado una vez, despacio, para un mensaje corto, funciona. Usado en todas partes, rápido, para mensajes largos, arruina la página.
Cómo usar la vista previa
Escribe primero tu mensaje, y mantenlo corto. Una frase funciona: un anuncio de oferta, una nota de envío o una fecha de evento. Un párrafo completo no funciona, porque nadie esperará todo un desplazamiento para leerlo, y el texto se repetirá antes de que terminen. La vista previa repite tu texto cuatro veces con un espacio entre copias, así que el desplazamiento se repite sin saltos: cuando la primera copia sale de la pantalla, la siguiente ya está entrando.
Luego ajusta la velocidad. El control define cuántos segundos tarda un desplazamiento completo, de 3 a 30 segundos. Diez segundos es un buen punto de partida para un banner corto. Más rápido que 5 segundos es difícil de leer para la mayoría de la gente. Más lento que 20 segundos puede sentirse congelado, porque el texto apenas parece moverse. La dirección es una elección de hábito de lectura: el desplazamiento hacia la izquierda es el estándar, porque coincide con cómo siempre se ha movido el texto de ticker. El desplazamiento hacia la derecha conviene a idiomas de derecha a izquierda o a un contraste visual deliberado, pero sorprende a los lectores que esperan la dirección estándar.
Espacio, tamaño y legibilidad
El espacio es la distancia entre repeticiones de tu texto, y importa más de lo que parece. Un espacio demasiado pequeño hace que las repeticiones se confundan en una frase interminable. Un espacio demasiado grande hace que el banner pase la mitad del tiempo vacío. Unos 40 píxeles convienen a la mayoría de los banners, con espacios mayores para texto mayor. El tamaño de letra debe corresponder a la importancia del banner: de 20 a 24 píxeles para un anuncio en todo el sitio, menor para un ticker sutil dentro de una sección. La vista previa muestra tamaño y espacio juntos, así que puedes juzgarlos como un par, no por separado.
Cuándo ayuda el texto deslizante y cuándo perjudica
El texto deslizante ayuda para un anuncio corto y urgente que todos los visitantes deben ver: una oferta que termina hoy, una interrupción del servicio, un lanzamiento de una función nueva. Ayuda para tickers donde el contenido en sí es un flujo, como precios de bolsa o resultados deportivos, porque el usuario espera movimiento allí. Ayuda como decoración en una sección principal, donde una palabra grande y lenta que se desplaza añade movimiento sin llevar información crítica.
Accesibilidad y movimiento
El texto deslizante es un problema de accesibilidad conocido. Es difícil para personas con dificultades de lectura, dificultades de atención y sensibilidad al movimiento, porque el texto nunca se queda quieto. El consejo estándar es pausar la animación al pasar el ratón, para que un usuario que quiera leer el mensaje pueda detenerlo apoyando el ratón sobre él, y respetar los ajustes de movimiento reducido mostrando el texto de forma estática para los usuarios que piden menos movimiento. El código copiado es un punto de partida: añade una regla hover que pause la animación, y una consulta de medios de movimiento reducido que la detenga por completo.
Preguntas frecuentes
¿La antigua etiqueta marquee todavía se puede usar? No. Está obsoleta, se comporta de forma inconsistente en los navegadores y no te da control. Usa en su lugar la animación CSS del cuadro de código.
¿Por qué mi marquesina salta cuando se repite? El bucle salta cuando el texto repetido no se alinea exactamente. Esta herramienta repite el texto con un espacio fijo y lo mueve exactamente la mitad de su anchura, que es el patrón estándar sin saltos. Mantén la misma estructura cuando adaptes el código.
¿A qué velocidad debe ir el texto deslizante? Lo bastante despacio para leer con comodidad: unos 10 segundos por pasada para un banner corto, más despacio para texto más largo. Si no puedes leerlo en voz alta a ritmo normal mientras se desplaza, es demasiado rápido.
Escribe un mensaje corto arriba, ajusta una velocidad tranquila y copia el código. Una sola marquesina lenta, usada con moderación, todavía merece su lugar en una página.
Herramientas relacionadas
- Marquee Text Preview (English version)
- Creador de Patrones de Puntos
- Creador de Patrones de Semitonos