Marquee para TYPO3

Textos em movimento e tickers não precisam de extensão, CSS resolve em 20 linhas

O elemento marquee é conhecido dos primórdios da web: texto rolando da direita para a esquerda pela página. A tag HTML <marquee> está deprecated há anos, mas o efeito continua em demanda. Tickers de notícias, banners de avisos (“Manutenção no sábado”) e anúncios de eventos usam textos em movimento como mecanismo de atenção. A extensão marquee para TYPO3 entrega um elemento de conteúdo que renderiza esse efeito via JavaScript. A Gosign recomenda em vez disso uma solução puramente CSS que funciona sem extensão, sem JavaScript e sem obrigação de atualização.

A diferença é mensurável: a extensão carrega JavaScript, registra um elemento de conteúdo no TCA e precisa de templates Fluid. A alternativa CSS é uma única animação CSS (20 linhas) em um elemento de conteúdo de texto normal. Performance, acessibilidade e esforço de manutenção falam claramente a favor da abordagem CSS.

Cenários típicos de uso são avisos de manutenção, banners de ação e resultados esportivos

O cenário mais frequente é o banner de aviso em sites corporativos. “Nosso escritório estará fechado de 24/12 a 02/01” ou “Inscreva-se agora: webinar em 15 de março”. O texto em movimento chama atenção sem ser um popup. Editores mantêm o texto no backend TYPO3 e ativam ou desativam o banner por data de início e término.

Segundo cenário: tickers de notícias em portais de notícias e páginas iniciais de intranet. As últimas três a cinco manchetes rodam como ticker pela borda superior da página. Cada manchete é um link para a notícia completa.

Terceiro cenário: resultados esportivos em sites de clubes. No dia de jogo, um ticker mostra os resultados atuais de todas as equipes. Os dados vêm de uma tabela TYPO3 ou feed externo e são apresentados como texto em movimento.

Arquitetura técnica da extensão é um elemento de conteúdo controlado por JavaScript

A extensão marquee registra um elemento de conteúdo no TCA TYPO3 que contém campos para texto, velocidade, direção e repetição. O template Fluid renderiza um elemento container, e um arquivo JavaScript inicializa a animação.

A alternativa CSS funciona assim: um elemento de conteúdo de texto normal recebe uma classe CSS (p.ex. “marquee”), e a animação CSS @keyframes scroll desloca o texto da direita para a esquerda. A animação é infinita, pausa no hover (via :hover) e respeita a configuração prefers-reduced-motion do sistema operacional, relevante para acessibilidade.

Problemas frequentes são acessibilidade, exibição mobile e relevância SEO

Problema um: acessibilidade. Conteúdos em movimento são problemáticos para pessoas com limitações cognitivas ou epilepsia. A WCAG 2.1 exige que animações sejam pausáveis, paráveis ou ocultáveis. A solução CSS respeita automaticamente a configuração prefers-reduced-motion, o que a extensão não faz.

Problema dois: exibição mobile. Em smartphones, o espaço disponível para texto em movimento é mínimo. Um ticker legível no desktop passa tão rápido no celular que ninguém consegue ler. A solução: em dispositivos móveis, substituir o ticker por um banner estático que mostra a mensagem mais importante sem animação.

Problema três: relevância SEO. Texto em movimento é indexado por motores de busca, mas os sinais de UX (curto tempo de permanência no ticker, sem cliques) podem afetar negativamente a qualidade da página.

A extensão é desnecessária para versões TYPO3 atuais

A extensão marquee não tem suporte oficial para TYPO3 v12 ou v13. Como a alternativa CSS pode ser implementada em 15 minutos e não cria dependência de extensão, a Gosign recomenda em toda migração a mudança. O editor usa um elemento de conteúdo de texto normal com uma classe CSS especial definida no site package. Isso é livre de manutenção, performante e acessível.