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. Uma extensão marquee para TYPO3 não está publicada nem no TER nem no Packagist; por isso, não é possível verificar o que ela traz. 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 é de princípio: cada extensão é uma dependência a mais, que precisa acompanhar cada upgrade do TYPO3. 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 alternativa CSS dispensa um elemento de conteúdo próprio

Não há versão pública da extensão marquee nem no TER nem no Packagist, então sua estrutura não pode ser verificada. A alternativa CSS, por sua vez, dispensa elemento de conteúdo próprio, template Fluid e JavaScript: velocidade, pausa no hover e repetição infinita ficam na animação CSS.

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 pausa no hover e respeita automaticamente a configuração prefers-reduced-motion, mas também precisa de um botão para parar a animação.

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

Não existe versão pública da extensão marquee que suporte o 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, com um botão de pausa, acessível.