Optický klam - jedna z najobľúbenejších pohybov dizajnérov a umelcov. Pomáhajú upozorniť na konštrukciu miestnosti, obraz na filme a obsahu stránok, diverzifikovať rozhranie na ľubovoľnom zariadení. Dnes sme vám o jednom takom technikou zvanou paralaxa efekt. Začnime s definíciou.

Čo je paralax?

Parallax (Greek ???????? -. "Povinnosť", "nič meniť,") -, takže zmena zdanlivej polohy objektu na vzdialenom pozadí v závislosti na polohe pozorovateľa.


To je založené na tomto fenoméne binokulárne videnie - schopnosť jasne odlíšiť jeden obraz, pri pohľade na obe oči. V astronómii a geodézii paralaxy efekt sa používa na meranie vzdialeností do vzdialených objektov.

Pojem astronómiu

Existujú rôzne typy hrdinov nášho príbehu:

geocentrický (denne) - rozdiel v smeroch rovnakej astronomický objekt od určitého bodu na planéte (vektor topotsentrycheskyy) a jej stred hmotnosť (geocentrický vektor).

Ročné - smery zmeniť na astronomického objektu spojené s rotáciou Slnka okolo našej Zeme.

Vek - zmenu polohy astronomických objektov viditeľných na oblohe kombinujúci vlastné otáčanie a pohyb slnečnej sústavy v galaxii.

V fotografiu

Predpokladajme paralaxy efekt vo fotografii. Tu sa stretáva aj s niekoľkýmiTypy

Parallax hľadáčik - obraz, ktorý sa fotograf vidí v hľadáčiku optický nezerkalnom nezhoduje s tým, čo sa deje v skutočných fotografií. Často sa to prejavuje pri snímaní blízkych objektov.

paralaxy nálezcu - uhol, v ktorom požadovaný objekt viditeľný, keď sa vznášať na ostrosti vytvorenom optickú diaľkomer).

binokulárne (stereoskopické) paralaxa - uhol, v ktorom sa objekt vyfotografovaná stereoskopické fotoustroystvom. Podobne ako binokulárne videnie.

, dočasné paralaxa - skreslenie predmetu účinku dát, ktoré sa objavia pri natáčaní fotoaparátu, ktorý má lamely uzávierky. V súčasnosti je viditeľné, že sa niečo rýchlo pohybuje. Ak objekt drží cestu k štrbine uzávierky, bude natiahnutý, inak - naopak.

v oblasti webdesignu

Tu sa paralaxa efekt (inými slovami - paralaxa rolovanie) - špeciálna recepcia, pri ktorej pozadí sa pohybuje pomaly v budúcnosti hlavný plán. Posledná je text, obrázok. Ako urobiť paralaxový efekt? Vytvára priestor 3D s viacerými pozadiami, ktoré sa pri posúvaní začínajú pohybovať rôznymi rýchlosťami. Vyzerá to docela pôsobivé a pôsobivé. Zoberme si program, v ktorom si môžete vytvoriť paralaxu účinok:

jQuery - je plugin, ktorý sa viaže paralaxy rolovanie užívateľom pre otočenie myši s kolieskom.

jParallax - môžu obrátiť prvky webovej stránky, ktoré sa polohovacie dokonale vrstvy, ktoré budú reagovať na pozíciu kurzora.

Scrolldeck je užitočnádoplnok, ktorý vám umožní dosiahnuť takýto efekt.

Funkcie v dizajne webových stránok

Dovoľujeme si upozorniť na skutočnosť, že efekt paralaxy nie je univerzálnou výzdobou pre všetky lokality. Prvým zdrojom, na ktorom bolo možné zamyslieť sa, bolo miesto Nike Corporation. A stále je to dosť dobré pre online obchody, ktoré pomáhajú oživiť show sortimentu, pohyb podľa kategórií. Ale v rozumnom rozmedzí - užívateľ stále chce rýchlo vyzerať a vybrať to, čo potrebuje, takže saturácia efekt veľmi skoro začne otravovať ho.
Bude kontroverzné, pokiaľ ide o jeho využitie v obchodných a informačných zdrojoch. Na jednej strane paralaxy umožňujú, aby nejako zlomili pevný text na bloky, na druhej strane to vyzerá trochu neisto. Ideálne bude jeho využitie pre detské, zábavné, kognitívne zdroje, stránky biografií, pomôže to zaistiť uznanie, originalitu, pritiahnuť pozornosť.

Nevýhody rolovania paralaxy a spôsoby, ako ich odstrániť

Parallax - celkom roztomilý a štýlový efekt. Avšak, výrazne zhoršuje stránku pomocou javascript /jQuery: musia vykonať sériu komplexných výpočtov na sledovanie pozície každého pixelu. To výrazne výrazne spomaľuje rýchlosť sťahovania webu. Môžu sa vyskytnúť aj problémy s cross-platformou a krížovým prehliadaním. Cesta von je, že najmä nereštartovať stránky s prvkami s účinkom paralaxy, stačí 1-2 na jednej stránke. Ďalším spôsobom je použitie CSS3. Pomáha vytvárať veľmi podobný efekt, ktorý je zároveň menej náročný na zdroje. Má však svoje nevýhody: len s jeho pomocou nie je možné dosiahnuť rolovanie paralaxy. Navyše nie všetky moderné prehliadače podporujú CSS3.

Príklady webdesignu

Pochopte, čo je paralaxový efekt, keď vidíte niektoré z jeho vyhotovení v dizajne webu:

Portfólio fotiek, ktoré reagujú na pohyby myši.

Vplyv posúvania - ak chcete otvoriť reklamu, článok, musíte vytiahnuť šípku v obraze.

Pri posúvaní zoznamu sa pozadie pohybuje pomalšie ako text.

Niektoré objekty (mraky, hračky, postavy, oblečenie) sa pohybujú na stránke.

Pri pohybe myšou sú vaše vrstvy rozptýlené.

Jedna časť stránky stránky je citlivá na umiestnenie kurzora a druhá časť je nehybná.

pohybom myši môžete spustiť vesmírnu raketu, cestné auto, človek, a tak ďalej E. efektu dosiahne tým, že pozadie sa pomaly pohybuje, a hlavný objekt. - rýchlo.

Aj v rozhraní rôznych operačných systémov sa takáto ilúzia uplatňuje. Najmä v systéme iOS 7 už bol paralaxový efekt charakterizovaný. Preto je predmet nášho príbehu relevantný v mnohých oblastiach. V poslednej dobe sa pevne usadil v dizajne webových stránok, ktorý však nezaručuje jeho univerzálny kúzlo pre všetky stránky.