Parallax efekt vo webdizajne

S parallaxovým efektom sa stretávame bežne každý deň, ale pravdepodobne si to neuvedomujeme. Pozrite si ho ako ho definuje a popisuje Ryan Boudreaux.

0
435
parallax efekt grafika

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

 

parallax efekt grafika

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.

Parallax bol používaný astronómami na vypočítavanie vzdialenosti nebeských telies, a tiež pre námornú plavbu pri určovaní vzdialenosti medzi objektami, kde bolo vymeriavanie použité na určenie aktuálnej polohy, ktorá je veľmi podobná orientačnej technike.
Hviezdna parallaxa využíva zjednodušený vzorec pre hľadanie vzdialenosti nebeských telies pomocou triangulácie , kde rovnice d = 1 / p ; Vzdialenosť [ parsecs ] = Základňa [ AU ] / Parallaxový uhol [ v oblúkových sekundách ] , kde 1 AU je orbitná dráha Zeme , a jedna Arc sekunda je 3,26 svetelných rokov.

Začiatky Parallaxového scrollingu  

Parallax scrolling resp. rolovanie je špeciálna technika používaná v grafike a animáciách pre simuláciu pohybu s obrázkami na pozadí pohybujúcich sa v rôznom pomere než popredie snímok . Parallax rolovanie bolo prvýkrát použité v roku 1940 na kreslenie animácií pomocou viacrovinnej kamerovej techniky. Parallax rolovací efekt bol dosiahnutý počiatočne pomocou počítačovej grafiky v roku 1980 v arkádovej hre Moon Patrol, a bol tiež známy ako jeden z prvých hier využívajúcich efektu bočného rolovania.

Parallax metódy

Existuje niekoľko metód, ktoré sú využívané pre rolovanie:
  • 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

Ukážeme si pár príkladov, ktoré najlepšie zvýrazňujú užívateľský zážitok z používania týchto parallax efektov. Tieto príklady typicky zahŕňajú kombinácie HTML5, CSS3, Grafický dizajn, jQuery a JavaScript.
Nasledujúcich desať príkladov ilustrujú rôzne spôsoby využitia parallax rolovania v oblasti webdesignu – niektoré rolujú horizontálne , iné vertikálne a zvyšné dokonca využívajú kombináciu týchto dvoch metód.

Sound of change

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

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