Paralaxně skrolující pozadí pomocí CSS a jQuery

Napsal Jakub Mikuláš

Když jsem si v tomto tvítu povzdechnul, bylo to po několika hodinovém zápasu s kódem, který jsem stejnak prohrál kvůli zastaralosti PC.

Zajímalo mě, zdali je možné rozhýbat PNG obrázky na pozadí a tím vytvořit zajímavý efekt – paralaxní skrolování.

Paralaxní skrolování není vůbec nic nového:

Současné implementace Paralaxního skrolování jsou mizivé – například www.silverbackapp.com, dromaeo.com, css-tricks.com. Žádného efektu si ani nevšimnete, poněvadž byste pro to museli měnit velikost okna, ale kdo to dneska dělá? Paralaxní skrolování je tedy rázem degradováno na určitý easter egg. Přitom si umím představit pořádné využití takového efektu.

Našel jsem několik návodů a podařilo se mi vytvořit 2 příklady:

  1. jedenbod.cz/port – pomalu skrolujte dolů
  2. jedenbod.cz/paralax – hýbejte s myší

V Google Chrome vše funguje bezvadně a už jsem uvažoval i o širším nasazení, ovšem když jsem otevřel Firefox, framerate šel rapidně dolů a vytížení procesoru vyskočilo na 100%.

Provedl jsem několik testů s různými prohlížeči a weby, které paralaxní skrolování používají – výsledky jsou velmi špatné. Firefox (i IE) měl problémy s pohyblivým průhledným *.PNG – dokonce i na thebeatlesrockband.com byl framerate téměř na nule. Velmi špatně dopadl také s použitím kódu v prvním příkladu (z inner.geek.nz).

V současné době je tedy paralaxní skrolování naprosto nepoužitelné. Sice se mi menšími úpravami podařilo zvýšit framerate v obou případech, ale i tak zůstává velké vytížení procesoru.

Snad jen tento příklad www.csslab.cl dosáhnul alespoň trochu použitelných výsledků i ve Firefoxu. Mimochodem, další příklady paralaxního skrolování: www.kremalicious.com

Je docela škoda že i v roce 2010 drží kreativitu na uzdě technika – i když překryv PNG s alfa kanály musí být naprosto snadný výpočet v porovnání s jinými věcmi, které jsou pro dnešní PC naprosto běžné.

Podobné články: