--- title: "Scrollytelling: co to jest? Słownik pojęć" description: "Scrollytelling to opowiadanie historii na stronie, w którym przewijanie uruchamia kolejne sceny. Tekst, obrazy, wykresy i animacje zmieniają się w rytmie…" url: https://fluostudio.pl/baza-wiedzy/slownik/scrollytelling/ --- [Animacja i wideo](https://fluostudio.pl/baza-wiedzy/slownik/?dzial=animacja) # Scrollytelling Inaczej scroll storytelling Scrollytelling to opowiadanie historii na stronie, w którym przewijanie uruchamia kolejne sceny. Tekst, obrazy, wykresy i animacje zmieniają się w rytmie przewijania. ## Usługi - [Landing page](https://fluostudio.pl/uslugi/strony-www/landing-page/) - [Strony www](https://fluostudio.pl/uslugi/strony-www/) Na zwykłej stronie przewijanie przesuwa treść w górę i tyle. W scrollytellingu przewijanie prowadzi opowieść. Tekst zatrzymuje się, a obok zmienia się obraz. Wykres rośnie razem z kolejnym akapitem. Produkt obraca się, gdy czytelnik schodzi niżej, i pokazuje dokładnie to, o czym mowa w tekście. Formę spopularyzowały redakcje. Głośnym przykładem był reportaż „Snow Fall” dziennika The New York Times. Dziś tak opowiada się historie firm, premiery produktów i procesy, które mają swoją kolejność. Na naszej stronie projektu [20 lat Porta w Rumunii](https://fluostudio.pl/projekty/porta-rumunia-20-lat/) historię jubileuszu opowiadamy przy przewijaniu, razem z albumem 3D. ## Do czego pasuje Gdy historia ma początek, środek i koniec, a czytelnik ma chwilę: premiera, historia firmy, [raport roczny](https://fluostudio.pl/baza-wiedzy/slownik/raport-roczny/), droga produktu od pola do półki. To [storytelling](https://fluostudio.pl/baza-wiedzy/slownik/storytelling/) rozpisany na kolejne ekrany. Nie ma sensu tam, gdzie ktoś przychodzi po jedną informację. Nikt nie chce oglądać spektaklu, żeby znaleźć cennik albo numer telefonu. Sklep, katalog i kontakt mają być szybkie i przewidywalne. ## Na co uważać - **Wydajność**: filmy i grafika 3D w przeglądarce ([WebGL](https://fluostudio.pl/baza-wiedzy/slownik/webgl/)) potrafią spowolnić stronę na telefonie i pogorszyć wyniki [Core Web Vitals](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/). Sprawdź ją na zwykłym telefonie, bo mocny komputer projektanta niczego tu nie dowodzi. - **Przewijanie**: strony, które zmieniają jego prędkość albo zatrzymują je na siłę, irytują. Czytelnik przewija jak zawsze, a animacja ma za nim nadążać. - **Dostępność**: część osób wyłącza animacje w ustawieniach systemu. Wtedy strona pokazuje tę samą treść bez ruchu ([dostępność cyfrowa](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/)). - **Tekst**: treść ma być tekstem na stronie, a nie napisem wtopionym w film albo obrazek. Inaczej nie przeczyta jej czytnik ekranu, a wyszukiwarka zrozumie ją gorzej. ## W naszych projektach - ### [20 lat Porta w Rumunii](https://fluostudio.pl/projekty/porta-rumunia-20-lat/) Strona projektu, na której historię jubileuszu opowiadamy przy przewijaniu, z albumem 3D. - ### [Itodi](https://fluostudio.pl/projekty/itodi/) Strona projektu, na której historię marki od taśmy na paczce po kartkę w kartonie opowiada jedna scena 3D prowadzona przewijaniem. ## Zobacz też - [Branding Storytelling Storytelling to opowiadanie o marce, produkcie albo kliencie w formie historii, z bohaterem, problemem i zmianą, zamiast wyliczania cech. Stosuje się go w kampaniach, na stronach, w prezentacjach i filmach.](https://fluostudio.pl/baza-wiedzy/slownik/storytelling/) - [Strony www Landing page Landing page to pojedyncza strona przygotowana pod jedną kampanię i jeden cel, np. zapis na webinar, pobranie katalogu albo zapytanie o ofertę. Trafia na nią ruch z reklam, mailingu czy kodu QR.](https://fluostudio.pl/baza-wiedzy/slownik/landing-page/) - [Strony www WebGL WebGL to technologia, dzięki której przeglądarka rysuje na stronie grafikę 3D na żywo, bez wtyczek, korzystając z karty graficznej urządzenia. Działają na niej m.in. przeglądarki modeli 3D i konfiguratory 3D.](https://fluostudio.pl/baza-wiedzy/slownik/webgl/) - [Strony www Dostępność cyfrowa Dostępność cyfrowa to projektowanie stron i aplikacji tak, żeby mogły z nich korzystać także osoby z niepełnosprawnościami, np. niewidome, słabowidzące, niesłyszące albo obsługujące komputer tylko klawiaturą.](https://fluostudio.pl/baza-wiedzy/slownik/dostepnosc-cyfrowa/) - [Strony www Core Web Vitals Core Web Vitals to trzy wskaźniki Google, które mierzą, jak strona działa u prawdziwych użytkowników. Sprawdzają, jak szybko pokazuje główną treść (LCP), jak szybko reaguje (INP) i czy układ nie skacze (CLS).](https://fluostudio.pl/baza-wiedzy/slownik/core-web-vitals/) - [Animacja i wideo Motion design Motion design to projektowanie ruchu w grafice. Animowane logo, ikony, napisy, wykresy i przejścia pokazują charakter marki i tłumaczą rzeczy szybciej niż statyczny obraz.](https://fluostudio.pl/baza-wiedzy/slownik/motion-design/) - [Druk i publikacje Raport roczny Raport roczny to podsumowanie roku firmy: wyniki finansowe, działalność i plany. Spółki giełdowe publikują go obowiązkowo, a część z nich wydaje też osobną, graficzną wersję dla inwestorów i partnerów.](https://fluostudio.pl/baza-wiedzy/slownik/raport-roczny/) - [Strony www Front-end Front-end to część strony lub aplikacji, którą użytkownik widzi i obsługuje, czyli układ, przyciski, formularze i animacje. Powstaje w HTML, CSS i JavaScripcie i działa w przeglądarce.](https://fluostudio.pl/baza-wiedzy/slownik/front-end/) Hasło pojawia się też w: [Infografika](https://fluostudio.pl/baza-wiedzy/slownik/infografika/) ## Potrzebujesz ruchu, który pasuje do marki? Pokażemy, jak to robimy. Na pierwszej rozmowie sprawdzimy, czy i jak możemy pomóc, bez zobowiązań. [Porozmawiajmy](https://fluostudio.pl/kontakt/) [Umów 30 minut konsultacji](https://calendly.com/anita-fluo/darmowa-konsultacja-30-minut)