Články

Staré dobré kulisy

Snadnou a přitom velmi účinnou metodou, jak vytvořit iluzi prostoru, je paralaxa efekt. O co jde? Zkuste svůj pohled zaměřit na nějaký objekt ve vaší blízkosti a střídavě se na něj dívejte levým a pravým okem. Vzhledem k pozadí bude tento předmět lehce měnit svou polohu do stran. Podobně funguje paralaxa scrolling  na webu. Stačí rozdělit layout stránek nebo libovolný obrázek na dvě či více vrstev stojících za sebou. Pokud se tyto vrstvy před očima uživatele pohybují rozdílnou rychlostí (vzdálenější pomalu, bližší rychleji), vytváří zjednodušený 3D obraz. Pokud vás zajímá, jak vypadá paralaxa v praxi, prohlédněte si povedenou ilustraci  od německého grafika Markuse Neidela.

Nesmrtelný stůl

Dalším způsobem, jak se vymanit z klasického formátu a přitom zůstat ve 2D, je jakási "nekonečná" plocha, na kterou se díváme shora a pohybem do stran odhalujeme její další části. Příkladem mohou být stránky www.schematic.com  nebo známé klišé v podobě obrázku pracovního stolu s kancelářskými předměty a nezbytným šálkem kávy. Originální nekonečnou plochu najdete také na www.soytuaire.labuat.com.  Záměr webu mi zůstal utajen, ale o to víc jsem si užíval jeho kreativního zpracování.

Panorama? Panorama!

Zajímavým efektem je i 360º panorama. Pokud se navíc ještě zkombinuje s paralaxou (pro navigační prvky nebo důležité informace v popředí) a lehkým vertikálním pohybem, může se vám ze všech těch efektů pěkně zatočit hlava. :-) 360º panorama je přímo ideální pro zobrazování interiérů a různých scenérií. V akci jej můžete vidět na webu Dodge's Ram Challenge  nebo v ukázce  frameworku Papervision 3D.

Papírová vize

S příchodem ActionScriptu 3.0 získal do té doby placatý Flash třetí rozměr. Papervision 3D totiž nabízí téměř neomezené možnosti ve zobrazování interaktivního prostředí. Tento open-source framework umožňuje definovat trojrozměrnou scénu, vkládat do ní objekty a dále s nimi pracovat.

A teď praxe…

Jak to vypadá, když suchopárnou geometrii nahradí organičtější objekty, si můžete prohlédnout na stránkách jedné novozélandské vodky  či olejářské firmy z Norska  . Podobný princip využívá také web agentury Leo Burnett  , kde si užijete netradiční a přitom skvěle použitelné "kreslící" navigace. I když umístíme 3D objekty do jednoduchého prostředí s minimem pohybu, mohou být značně působivé. Stačí se inspirovat třeba prezentací Air Jordan 2009  od firmy NIKE. V neposlední řadě stojí za vaši pozornost web www.ecodazoo.com  , který představuje cosi jako strom s prapodivnými bytostmi a jejich příběhy. Tahle parádní kombinace svěžího nápadu a vizuální kreativity se zaslouženě stala webem roku na The FWA  .

Web jako gamesa

Stránky hororového režiséra M. Night Shyamalana  jsou ukázkovým příkladem konverze herního prostředí na web. Nechybí 3D scény, animace ani jednoduché hádanky. Grafika je velmi efektní a realistická, ale na druhou stranu pokulhává použitelnost ovládání. Tvůrci stránek zřejmě počítali jen se zkušenějšími uživateli.

Podělte se o svou inspiraci

V dnešním článku jsme si ukázali jen zlomek možností, jak do tvorby webu zapojit prostor. Pokud znáte další zajímavé stránky, které originálním způsobem využívají prostorových efektů, dejte nám vědět. Rád si o vaší inspiraci přečtu v komentářích.