Marquee dla TYPO3

Teksty przewijane i tickery nie potrzebują rozszerzenia, CSS rozwiązuje to w 20 liniach

Element marquee zna każdy z początków internetu: przewijający się tekst, który przesuwa się od prawej do lewej po stronie. Tag HTML <marquee> od lat jest deprecated, ale efekt pozostaje pożądany. News-tickery, banery informacyjne (“prace konserwacyjne w sobotę”) i zapowiedzi wydarzeń wykorzystują teksty przewijane jako mechanizm przyciągania uwagi. Rozszerzenie marquee dla TYPO3 dostarcza element treści, który renderuje ten efekt przez JavaScript. Gosign zaleca zamiast tego czyste rozwiązanie CSS, które obywa się bez rozszerzenia, bez JavaScriptu i bez obowiązku aktualizacji.

Różnica jest mierzalna: rozszerzenie ładuje JavaScript, rejestruje element treści w TCA i wymaga szablonów Fluid. Alternatywa CSS to pojedyncza animacja CSS (20 linii) na zwykłym elemencie treści tekstowej. Wydajność, dostępność i nakład utrzymania jednoznacznie przemawiają za podejściem CSS.

Typowe scenariusze to informacje o przerwach technicznych, banery akcji i wyniki sportowe

Najczęstszym scenariuszem jest baner informacyjny na firmowej stronie. “Nasze biuro jest nieczynne od 24.12 do 02.01” lub “Zapisz się teraz: webinarium 15 marca”. Przewijający się tekst zwraca uwagę, nie będąc popupem. Redaktorzy zarządzają tekstem w backendzie TYPO3 i aktywują lub dezaktywują baner przez datę początkową i końcową.

Drugi scenariusz: News-ticker na portalach informacyjnych i stronach startowych intranetu. Ostatnie trzy do pięciu nagłówków przewija się jako ticker w górnej części strony. Każdy nagłówek jest linkiem do pełnego artykułu. Szybkość jest tak ustawiona, aby tekst pozostawał czytelny (zalecane: 30 do 50 pikseli na sekundę).

Trzeci scenariusz: wyniki sportowe na stronach klubów. W dniu meczowym ticker pokazuje aktualne wyniki wszystkich drużyn. Dane pochodzą z tabeli TYPO3 lub zewnętrznego feedu i są prezentowane jako przewijany tekst. Kombinacja tekstu przewijanego i automatycznej aktualizacji (przez AJAX co 60 sekund) czyni ticker kanałem informacyjnym w czasie rzeczywistym bez złożoności pełnego rozszerzenia liveticker.

Architektura techniczna rozszerzenia to element treści sterowany JavaScriptem

Rozszerzenie marquee rejestruje element treści w TCA TYPO3, który zawiera pola dla tekstu, szybkości, kierunku i powtarzania. Szablon Fluid renderuje element kontenerowy, a plik JavaScript inicjalizuje animację. Konfiguracja (szybkość, pauza przy najechaniu, nieskończone powtarzanie) jest przekazywana do JavaScriptu przez atrybuty data na elemencie kontenera.

Alternatywa CSS działa tak: zwykły element treści tekstowej otrzymuje klasę CSS (np. “marquee”), a animacja CSS @keyframes scroll przesuwa tekst od prawej do lewej. Animacja jest nieskończona, zatrzymuje się przy najechaniu (przez :hover) i respektuje ustawienie prefers-reduced-motion systemu operacyjnego, co jest istotne dla dostępności. Cały kod:

.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%); } }

Częste problemy to dostępność, widok mobilny i znaczenie SEO

Problem pierwszy: dostępność. Ruchome treści są problematyczne dla osób z ograniczeniami poznawczymi lub padaczką. WCAG 2.1 wymaga, aby animacje można było zatrzymać, wstrzymać lub ukryć. Rozszerzenie oferuje funkcję pauzy przy najechaniu, ale brak przycisku stop. Rozwiązanie CSS automatycznie respektuje ustawienie prefers-reduced-motion, czego rozszerzenie nie robi.

Problem drugi: widok mobilny. Na smartfonach dostępne miejsce na przewijany tekst jest minimalne. Ticker, który na pulpicie jest dobrze czytelny, na telefonie przelatuje tak szybko, że nikt nie zdąży przeczytać. Rozwiązanie: na urządzeniach mobilnych zastąpić ticker statycznym banerem, który pokazuje najważniejszy komunikat bez animacji.

Problem trzeci: znaczenie SEO. Przewijany tekst jest indeksowany przez wyszukiwarki, ale sygnały UX (krótki czas na tickerze, brak kliknięć) mogą negatywnie wpłynąć na jakość strony. Treści tickera powinny być zawsze dostępne także jako zwykłe treści strony, nie tylko w tickerze.

Czwarty problem: zgodność z dostępnością w instytucjach publicznych. Ustawa o dostępności cyfrowej i norma EN 301 549 wymagają, aby animacje można było zatrzymać. Marquee bez przycisku stop lub mechanizmu pauzy narusza WCAG 2.2.2 (Pause, Stop, Hide). Rozwiązanie CSS z prefers-reduced-motion i pauzą na :hover spełnia to wymaganie częściowo, dla pełnej zgodności potrzebny byłby wyraźny przycisk pauzy.

Rozszerzenie jest zbędne dla aktualnych wersji TYPO3

Rozszerzenie marquee nie ma oficjalnego wsparcia dla TYPO3 v12 lub v13. Ponieważ alternatywa CSS jest wdrażana w 15 minut i nie generuje zależności od rozszerzenia, Gosign zaleca przy każdej migracji zmianę. Redaktor używa zwykłego elementu treści tekstowej ze specjalną klasą CSS, zdefiniowaną w Site-Package. Jest to bezobsługowe, wydajne i dostępne.

Dla projektów, które chcą rotować kilka komunikatów w tickerze, wystarcza rozszerzona animacja CSS przechodząca przez kilka bloków tekstowych po kolei. Alternatywnie minimalny JavaScript (poniżej 20 linii) może doładowywać teksty ze źródła JSON i sterować animacją. Oba rozwiązania są architektonicznie czystsze niż rozszerzenie, które dla jednego efektu dostarcza kompletne pole TCA, szablon Fluid i plik JavaScript. W Gosign stosujemy podejście CSS we wszystkich projektach, które potrzebują tickera lub tekstu przewijanego.