Marquee para TYPO3

Los textos en movimiento y tickers no necesitan extensión, CSS lo resuelve en 20 líneas

El elemento marquee es un clásico de los primeros años de la web: texto deslizante que se mueve de derecha a izquierda sobre la página. La etiqueta HTML <marquee> lleva años en desuso, pero el efecto sigue siendo demandado. Tickers de noticias, banners de aviso (“trabajos de mantenimiento el sábado”) y anuncios de eventos usan textos deslizantes como mecanismo de llamada de atención. La extensión marquee para TYPO3 ofrece un elemento de contenido que genera ese efecto mediante JavaScript. Gosign recomienda en su lugar una solución exclusivamente basada en CSS, sin extensión, sin JavaScript y sin obligación de actualización.

La diferencia es medible: la extensión carga JavaScript, registra un elemento de contenido en el TCA y requiere plantillas Fluid. La alternativa CSS es una sola animación de CSS (20 líneas) sobre un elemento de contenido de texto normal. Rendimiento, accesibilidad y coste de mantenimiento hablan claramente a favor del enfoque CSS.

Los escenarios típicos son avisos de mantenimiento, banners promocionales y resultados deportivos

El escenario más habitual es el banner de aviso en webs corporativas. “Nuestras oficinas estarán cerradas del 24 de diciembre al 2 de enero” o “Inscríbete ya: webinar el 15 de marzo”. El texto deslizante atrae la atención sin ser un popup. Los redactores mantienen el texto en el backend de TYPO3 y activan o desactivan el banner mediante fechas de inicio y fin.

Segundo escenario: tickers de noticias en portales de información e intranets corporativas. Los últimos tres o cinco titulares se desplazan como ticker por el borde superior de la página. Cada titular es un enlace a la noticia completa. La velocidad se ajusta para que el texto siga siendo legible (recomendado: 30 a 50 píxeles por segundo).

Tercer escenario: resultados deportivos en webs de clubes. En día de partido, un ticker muestra los resultados actualizados de todos los equipos. Los datos proceden de una tabla TYPO3 o de un feed externo y se presentan como texto deslizante. La combinación de texto en movimiento y actualización automática (vía AJAX cada 60 segundos) convierte el ticker en un canal de información en tiempo real sin la complejidad de una extensión de liveticker completa.

La arquitectura técnica de la extensión es un elemento de contenido gobernado por JavaScript

La extensión marquee registra un elemento de contenido en el TCA de TYPO3 con campos para texto, velocidad, dirección y repetición. La plantilla Fluid renderiza un contenedor y un fichero JavaScript inicializa la animación. La configuración (velocidad, pausa al pasar el ratón, repetición infinita) se pasa al JavaScript mediante atributos data en el contenedor.

La alternativa CSS funciona así: un elemento de contenido de texto normal recibe una clase CSS (por ejemplo, “marquee”) y la animación @keyframes scroll desplaza el texto de derecha a izquierda. La animación es infinita, se pausa al pasar el ratón (via :hover) y respeta el ajuste prefers-reduced-motion del sistema operativo, algo relevante para accesibilidad. El código completo:

.marquee { overflow: hidden; white-space: nowrap; }
.marquee span { display: inline-block; animation: scroll 20s linear infinite; }
.marquee:hover span { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .marquee span { animation: none; } }
@keyframes scroll { from { transform: translateX(100%); } to { transform: translateX(-100%); } }

Los problemas frecuentes son accesibilidad, visualización móvil y relevancia SEO

Primer problema: accesibilidad. Los contenidos en movimiento son problemáticos para personas con limitaciones cognitivas o epilepsia. La WCAG 2.1 exige que las animaciones se puedan pausar, detener u ocultar. La extensión ofrece una función de pausa al pasar el ratón, pero no un botón de parada. La solución CSS respeta automáticamente el ajuste prefers-reduced-motion, algo que la extensión no hace.

Segundo problema: visualización móvil. En smartphones, el espacio disponible para texto deslizante es mínimo. Un ticker legible en el escritorio pasa tan rápido en el móvil que nadie puede seguirlo. La solución: en dispositivos móviles sustituir el ticker por un banner estático que muestre el mensaje más importante, sin animación.

Tercer problema: relevancia SEO. Los motores de búsqueda indexan el texto deslizante, pero las señales de UX (tiempo breve en el ticker, sin clics) pueden afectar negativamente a la calidad de la página. Los contenidos del ticker deberían estar siempre disponibles también como contenido normal, no solo dentro del ticker.

Un cuarto problema: cumplimiento de accesibilidad en entidades públicas. La legislación española sobre accesibilidad web (Real Decreto 1112/2018, que transpone la Directiva UE 2016/2102) y la norma EN 301 549 exigen que las animaciones se puedan pausar y detener. Un marquee sin botón de parada o mecanismo de pausa infringe WCAG 2.2.2 (pause, stop, hide). La solución CSS con prefers-reduced-motion y pausa al pasar el ratón cumple parcialmente este requisito; un botón de pausa explícito sería necesario para cumplimiento total.

La extensión es superflua para las versiones actuales de TYPO3

La extensión marquee no tiene soporte oficial para TYPO3 v12 o v13. Dado que la alternativa CSS se implementa en 15 minutos y no crea dependencia de extensión, Gosign recomienda el cambio en cada migración. El redactor utiliza un elemento de contenido de texto normal con una clase CSS especial definida en el site package. Es libre de mantenimiento, eficiente y accesible.

Para proyectos que quieran rotar varios mensajes en el ticker, basta con una animación CSS ampliada que encadene varios bloques de texto. Como alternativa, un JavaScript mínimo (menos de 20 líneas) puede cargar los textos desde una fuente JSON y controlar la animación. Ambas opciones son arquitectónicamente más limpias que una extensión que, para un simple efecto, arrastra un campo TCA completo, una plantilla Fluid y un fichero JavaScript. En Gosign aplicamos el enfoque CSS en todos los proyectos que necesitan un ticker o texto en movimiento.