Paralax scrolling je efekt, kdy se pozadí stránky při rolování posouvá pomaleji než popředí. Vzniká tím dojem hloubky - stránka najednou nepůsobí jako plochý list, ale jako několik vrstev za sebou.
Jak paralax vlastně funguje?
Princip je stejný jako když se díváte z okna jedoucího auta - blízké stromy kolem vás „prolétávají" rychle, vzdálené kopce v pozadí se pohybují sotva znatelně. Web dělá totéž s vrstvami obrázků nebo prvků. Nejjednodušší varianta se dá zapsat jedinou CSS vlastností background-attachment: fixed, propracovanější verze počítají rychlost každé vrstvy vlastním kódem podle toho, jak daleko uživatel odroloval.
V roce 2026 už jde paralax udělat i čistě přes CSS bez jediného řádku JavaScriptu (takzvané scroll-driven animace), podpora v prohlížečích ale zatím není všude stejná. Spolehlivější a víc odzkoušená cesta je pořád kombinace JavaScriptu a CSS transformací - běží plynule i na starším telefonu.
Kdy se paralax na webu hodí?
Nejčastěji ho vidíte v hero sekci na úvodní stránce nebo ve storytellingových sekcích, kde chcete čtenáře provést příběhem postupně, odstavec po odstavci, s vizuálním posunem v pozadí. Funguje dobře tam, kde má web prostor na efekt navíc - třeba u prezentace produktu nebo portfolia.
Na mobilu se paralax chová nespolehlivě, proto se obvykle přes CSS media query na menších obrazovkách úplně vypíná a nahradí normálním rolováním.
Paralax efekt zapojuju do webu na míru tam, kde dává smysl - v hero sekci nebo v konkrétní storytellingové části, ne plošně po celé stránce. Podívejte se na tvorbu webu na míru →.
Jaké má paralax limity?
Cena za efekt navíc je výkon. Složitější paralax dokáže web zpomalit a na slabším mobilu působit trhaně, protože prohlížeč musí přepočítávat pozici několika vrstev při každém pixelu odrolování. Obecně platí, že komplexnější paralax může zhoršit rychlost stránky a ztížit její indexaci - konkrétní dopad se liší projekt od projektu, proto se to vyplatí otestovat, ne jen odhadovat.
Druhý limit je přístupnost. Pohybující se pozadí umí u části uživatelů, typicky s vestibulárními poruchami, vyvolat závrať nebo nevolnost. Proto by web měl respektovat systémové nastavení prefers-reduced-motion a paralax v takovém případě zjemnit nebo úplně vypnout.
Paralax, nebo raději statický hero?
Pokud si nejste jistí, jestli paralax web potřebuje, bezpečnější výchozí bod je statický hero bez vrstvení - je rychlejší, funguje všude stejně a nic se u něj nemůže „rozbít" na starším telefonu. Paralax přidávejte až tam, kde má konkrétní účel, ne jako plošnou ozdobu.
Můj pohled
Paralax měl velkou vlnu popularity před pár lety, dnes už ho tolik nevídám. Přijde mi to ale pořád jako zajímavý doplněk - nestojí moc práce a přitom je efektní. Existují i propracované paralax efekty a celé řetězce animací, jako má třeba Apple v prezentacích svých produktů, ale to je disciplína sama o sobě. Časově i finančně je to natolik náročné, že si to běžný majitel firmy většinou nemůže dovolit.
Paralax není nutnost, je to ozdoba. Pokud web řešíte celkově - responzivní zobrazení, core web vitals, přístupnost podle WCAG - zapadá paralax do úvahy až jako poslední krok, ne jako první rozhodnutí.
Pavel Szabo
Programátor webů, eshopů a informačních systémů s více než 23 lety praxe. Pomáhám firmám i jednotlivcům s online podnikáním, automatizacemi a využitím AI v praxi.
