Storytelling dla TYPO3

Raporty roczne i prezentacje produktów potrzebują czegoś więcej niż tekstu i obrazu

Statyczne strony z długimi blokami tekstu sprawdzają się przy dokumentacji i artykułach blogowych. Ale raporty roczne, premiery produktów i historie firm potrzebują formatu prowadzącego odwiedzającego przez narrację. Scrollytelling, czyli storytelling oparty na interakcji przewijania, ugruntował się jako format znajdujący się między statycznym tekstem a kosztownym wideo. Rozszerzenie Storytelling dla TYPO3 wprowadza Parallax-Scrolling, animowane bloki treści i animacje wyzwalane przewijaniem bezpośrednio do CMS, bez konieczności zlecania zewnętrznej usłudze lub agencji programowania unikatu na każdą stronę.

Przewaga nad custom-rozwojem: redaktorzy mogą utrzymywać treści w backendzie TYPO3, sortować bloki i konfigurować animacje, bez angażowania programisty.

Typowe scenariusze to raporty roczne, premiery produktów i strony kampanijne

Najbardziej widocznym scenariuszem są cyfrowe raporty roczne. Firmy, fundacje i organizacje pozarządowe coraz częściej publikują swoje wyniki finansowe jako interaktywną historię webową zamiast PDF. Scrollytelling-raport roczny pokazuje w pierwszej sekcji liczbę nagłówkową (przychody, wolumen darowizn, liczba członków), która animacyjnie odlicza się przy przewijaniu. W drugiej sekcji pojawiają się wykresy z porównaniem do roku poprzedniego. W trzeciej zdjęcia portretowe i cytaty opowiadają historię stojącą za liczbami. Cała opowieść mieści się na jednej stronie, którą odwiedzający przewija.

Drugim scenariuszem są prezentacje produktów w sektorze B2B. Producent maszyn przedstawia nową linię produkcyjną. Przy przewijaniu obraca się rendering 3D maszyny, pojawiają się dane techniczne, animacje pokazują proces produkcji. Nie jest to wideo (brak ładowania, brak buforowania), lecz animacja sterowana przewijaniem, którą odwiedzający przechodzi we własnym tempie.

Trzeci scenariusz: strony kampanijne. Organizacja pomocowa pokazuje drogę darowizny: od kliknięcia przycisku “Wesprzyj”, przez wybór projektu, po raport z kraju docelowego. Każda sekcja przewijania zawiera zdjęcie, krótki tekst i animację wizualizującą postęp.

Architektura techniczna renderuje sekcje jako bloki treści sterowane przewijaniem

Rozszerzenie definiuje własny typ elementu treści “Storytelling”, składający się z sekcji. Każda sekcja jest rekordem backendu z polami dla nagłówka, tekstu, obrazu/wideo (FAL), koloru tła, typu animacji i wyzwalacza przewijania. Sekcje sortuje się w backendzie i razem tworzą one historię scrollową.

We frontendzie każda sekcja renderuje własny obszar wypełniający viewport. Animacje wyzwalane są przez przejścia CSS i IntersectionObserver: gdy sekcja wjeżdża w obszar widoczny, startuje skonfigurowana animacja (Fade-In, Slide-Left, Zoom, Counter). Efekty parallax przesuwają obrazy tła wolniej niż pierwszy plan, co tworzy wrażenie głębi.

Rozszerzenie dostarcza zestaw predefiniowanych animacji. Własne animacje można dodawać przez klasy CSS wybierane jako typ animacji w backendzie. Bazą JavaScript jest minimum: brak frameworka, tylko natywny IntersectionObserver i requestAnimationFrame. Utrzymuje to rozmiar bundle’a poniżej 20 KB.

Dla wydajności kluczowe jest, aby obrazy ładowały się leniwie. Scrollytelling-raport z 15 sekcjami i jednym obrazem wysokiej rozdzielczości na sekcję bez lazy loadingu generuje od 30 do 50 MB zapytań. Z lazy loadingiem przeglądarka pobiera tylko aktualnie widoczną i kolejną sekcję.

Częste problemy dotyczą wydajności mobilnej i dostępności

Największym problemem przy scrollytellingu na urządzeniach mobilnych jest wydajność. Efekty parallax, które na desktopie działają płynnie, na starszych smartfonach przycinają. Powód: mobilne przeglądarki renderują zdarzenia przewijania inaczej niż desktopowe i ograniczają requestAnimationFrame w tle. Rozwiązanie: wyłączyć parallax na viewportach mobilnych i zastąpić go prostymi animacjami fade-in. Rozszerzenie powinno być konfigurowalne przez TypoScript - które animacje są aktywne na których breakpointach.

Drugi problem: dostępność (WCAG 2.1). Animacje sterowane przewijaniem są problematyczne dla użytkowników z zaburzeniami przedsionkowymi (zawroty głowy, mdłości przy ruchu). CSS prefers-reduced-motion musi być respektowany. Rozszerzenie powinno przy włączonym ustawieniu Reduce Motion wyłączać wszystkie animacje i pokazywać treści jako statyczne bloki. Nie wszystkie rozszerzenia storytelling implementują to poprawnie.

Trzeci temat: SEO. Google potrafi crawlować animacje JavaScript, ale treść musi być dostępna również bez JavaScript. Sekcje muszą być renderowane jako zwykłe bloki HTML, a nie puste kontenery wypełniane dopiero przez JavaScript. Rozszerzenie powinno podążać za zasadą Progressive Enhancement: najpierw treść, potem animacja.

TYPO3 v12 jest wspierany, v13 wymaga aktualizacji rejestracji elementów treści

Rozszerzenia scrollytelling dla TYPO3 dostępne są w różnych wariantach od różnych dostawców. Kompatybilność z v12 zapewnia większość aktywnie utrzymywanych rozszerzeń. Dla v13 konieczna jest aktualizacja rejestracji elementów treści (NewContentElementWizard) i konfiguracji TCA, ponieważ v13 dostosował konfigurację elementów treści opartą na FlexForm. Gosign w nowych projektach scrollytelling stawia na architekturę oddzielającą logikę animacji jako samodzielny moduł JavaScript od integracji TYPO3, dzięki czemu przy przyszłych upgrade’ach konieczne jest dostosowanie tylko warstwy TYPO3.