Parallax nie je nový žiaden druh lieku na trhu; v podstate vôbec nie je nový. Je to grafický resp. vizuálny efekt. Ľudia ho používajú od začiatku modernej doby. Rovnice, ktoré definujú Parallax efekt v matematických termínoch boli používané stáročia astronómami a oceánskymi bádateľmi pri vypočítavaní vzdialeností a smeru. “Parallax scrolling” bol využívaný v animáciách už od roku 1940 a vo video hrách od roku 1980. Využitie parallaxových techník pre webdizajn je relatívne nový trend a dodáva na popularite veľa webovým stránkam a organizáciám. Tento článok prezentuje históriu paralaxového efektu a scrollovania a ukáže Vám pár úžasných príkladov na túto tému.
Pohľad do minulosti a princíp fungovania Parallax efektu
Slovo Prallax je odvodený z Gréckeho slova parallaxis, čo znamená premenu. Viditeľná pozícia objektu v akejkoľvek vzdialenosti záleží na uhle pohľadu resp. na pozícii pozorovateľa. Efekt posunu nastane, keď je blízky objekt pozorovaný z rôznych uhlov a z rozdielnych pozícií pozorovateľa.
Pre ilustráciu účinku perspektívneho posunu si zoberme za príklad Washingtonský pamätník. Pokiaľ stojíte na pravej strane Národného parku Druhej svetovej vojny blízko 17th Street SW a ste otočený tvárou pamätníku, tak sa zdá, že je na ľavej strane budovy United States Capitol. Budeme to volať Bod A.
Bod A
Teraz sa prejdime trošku ďalej, aby sme posunuli náš pohľad na chodník tesne k ľavému vstupu do pamätníka druhej svetovej vojny na strane ulice 17th Street SW a naďalej zostaneme otočený tvárou k Washingtonskému pamätníku. Náš uhol pohľadu sa zmenil a Washingtonský pamätník sa zdá byť na pravej strane budovy United States Capitol. (Bod B). Tomuto sa hovorí parallax efekt. Objekt v popredí sa javí, že sa hýbe v rozdielnej rýchlosti a uhloch v závislosti od objektov zobrazených v pozadí.
Parallax princíp môže byť ďalej vysvetlený s geometriou a známymi premennými začínajúcimi uhlom A, ktorý je vytvorený medzi dvoma hľadiskami – A a B a to vo vzťahu k objektu O (Washingtonský pamätník), so základnou vzdialenosťou D medzi dvoma bodmi pohľadu. Potom vzdialenosť R môže byť odvodená ako je znázornené v jednoduchom trojuholníku zobrazenom na obrázku C.
Obrázok C
Každý človek sa stretáva s parallaxovým efektom každý deň, ale pravdepodobne si to neuvedomuje, pretože je súčasťou nášho každodenného života. Normálny ľudský zrak využíva parallaxový efekt pre odhad vzdialenosti k objektom a to takou rýchlosťou, že si to nikdy neuznáte, kým si to sami nevyskúšate. Ak si chcete vyskúšať zblízka parallaxové efekty v pohodlí svojho domova či kancelárie, tak držte ruku pred sebou v úrovní očí a ukážte ukazovák hore. Teraz striedavo žmurkajte lavým a pravým okom. Všimli ste si, ako sa váš ukazovák začal pohybovať relatívne vzhľadom k objektom v pozadí? To je parallaxový efekt v praxi! V tomto prípade je základná vzdialenosť medzi vašimi dvoma očami. Váš mozog automaticky zmeria parallaxový uhol a dá vám intuitívny odhad vzdialenosti tohto blízko objektu, ktorý bol v tomto prípade prst.
Začiatky Parallaxového scrollingu
Parallax metódy
- Vrstvy – Viacnásobné popredia a pozadia vrstvy sú formulované tak, že sa môžu pohybovať v horizontálnom alebo vertikálnom smere a posúvať pri rôznych rýchlostiach, niektoré z nich sú automaticky riadené a ďalšie sú závislé na interakcii s užívateľom.
- Sprite – Kombinácia viacerých obrázkov alebo bitmáp do pseudo – vrstiev, ktoré slúžia na vytvorenie jediného obrazu, ktorý sa môže javiť ako trojrozmerný. Zobrazuje sa len jedna časť obrazu v závislosti na polohe.
- Opakovaná manipulácia so vzormi – Viacnásobné dlaždice alebo obrazovky sa akoby vznášajú cez opakované pozadie.
- Rastre – linky pixelov v obraze sú typicky zložené a obnovované v poradí zvrchu nadol s miernym oneskorením medzi výkresom jedného a nasledujúceho riadka.
Parallax rolovanie v oblasti webdesignu
Sound of change
Veľmi jednoduchý a krásny príklad od projektu Sound of Change (Hudba zmeny). Hneď pri zapnutí stránky sa vám spustí príjemná muzika takže si rozhodne nezabudnite zapnuté reproduktory.
Boombotix
Nezabudnite si pozrieť prezentačnú stránku firmy Boombotix, ktorá propaguje svoje prehrávacie zariadenie. Táto stránka rozhodne zaujme každého návštevníka.
Cultural Solutions UK
The Cultural Solutions UK využíva kombináciu horizontálnych a vertikálnych parallax rolovacích efektov s textom a obrázkami v popredí pohybujúcich sa vyššou rýchlosťou, než niekoľko obrázkov na pozadí a obsah samotný .
Fishy.com
Fishy.com.br so sídlom v Recife v Brazílii používajú parallaxné rolovanie v ich stránke na promovanie produktov a služieb zameraných na web a mobilné zariadenia, ktoré sú založené na komunikácii pre klientov, ako majú napríklad Kraft a Wal – Mart.
Hero WordPress Theme
Hero je responzívna a minimalistická WordPress téma, ktorej jedna z kľúčových služieb je je parallax banner domovskej stránky, ktorý vám umožní zobraziť kľúčovú správu vášho biznisu v zaujímavom štýle.
OK Studios
OK Studios sídliace v Hamburgu v Nemecku využíva efektívne parallax rolovanie na ich prezentačných stránkach ich projektov, dizajnu a technológií, laboratórií, a ostatných vecí týkajúcich sa ich biznisu.
Soleil Noir
Soleil Noir Studio, sídliace v Paríži, použilo rolovanie v ich “Believe In page highlighting” (Viera vo zvýrazňovanie stránky) 18 sekciách inšpirácie vo vieru v zábavú, módu, operačný mobilný systém iOS, zdravie, Flash, budúcnosť a iné.
Čítajte viac: Parallax ako trend UX dizajnu
