14 úžasných webů pro rolování paralaxou

Paralaxové rolování je tu už nějakou dobu, ale je to jeden z trendů v oblasti webového designu, který stále pokračuje. Posouvání paralaxy je, když rozložení webových stránek vidí pozadí webové stránky pohybující se pomaleji do popředí a vytváří při posouvání 3D efekt. Při střídmém použití může poskytnout pěkný, jemný prvek hloubky, který má za následek výrazný a nezapomenutelný web.

Chcete-li ukázat, jak by to mělo být provedeno, zde je několik webů, které tuto techniku využívají k brilantnímu efektu. V některých případech je rolování paralaxy hvězdou show; v ostatních jednoduše přidává dotek hloubky, díky kterému se popředí zdá být trochu vyskakující.

Pokud máte chuť skutečně vytáhnout loď ven, tyto působivé příklady animací CSS představují další skvělý způsob, jak postavit váš web. z davu. A můžete si také prohlédnout naše nejlepší nástroje pro webový design, které vám pomohou s návrhovým úsilím. Prozatím se ale podívejme na některé weby pomocí paralaxového rolování velmi správným způsobem.

Historie umění webového designu

Dějiny umění a webdesign nejsou předměty, které byste nutně dali dohromady, ale jsou nádherně sjednocený v tomto webu historie umění webdesignu, který sleduje budoucnost webdesignu tím, že se na umění dívá v čase.

Zde se hraje řada technik paralaxního rolování, což znamená, že uživatelé jsou neustále překvapeni a potěšeni jak se posouvají dolů po stránce. Tahle stojí za to strávit trochu času zkoumáním.

Interaktivní katalog Qode

Interaktivní katalog Qode má stylizovaný spodní navigační systém, který vám odhalí obrázek pro každou položku. Kliknutím na katalog se zobrazí vodorovné posouvání paralaxy, které se používá k prezentaci řady témat WordPress. V tomto seznamu nejde o průlomové použití rolování paralaxy, ale slouží svému účelu dobře. K dobrému efektu se také používá stříkání animace.

Kanály

Canals, navržený Marcusem Brownem a vyvinutým Aristidem Benoistem, vás provede 400letou cestou historií amsterdamských kanálů 17. století. Stránky jsou navrženy tak, aby poskytovaly zážitek v redakčním stylu , jako listování ve svěžím objemu konferenčního stolku, a skvěle využívá paralaxu, aby vás upozornila na nové části jeho příběhu a poskytla webu jemný hloubkový efekt.

Příběh The Goonies

Kdokoli v určitém věku má zaručenou lásku „80. let te cs Dobrodružný film, The Goonies, a pokud jste to vy, pak tento web určitě rozproudí vaše nostalgické žlázy. Příběh The Goonies, který vytvořil Joseph Berry pomocí WebFlow, je poctou retro klasice, která pomocí paralaxového rolování vtáhne vás do příběhu, představí vám postavy a odhalí režim filmu.

Dogstudio

Okamžitou přitažlivostí stránek Dogstudia je krásný animovaný 3D pes – nebo je to vlk? – uprostřed stránky, který se při posouvání zmenšuje a otáčí svou cestou dolů na stránku paralaxy. Jeho osvětlení mění barvu, když najedete nad tituly nedávných projektů Dogstudia, a náš oblíbený kousek je možná ten, když se točí před některou kopií stránky a zakrývá část textu.

ToyFight

ToyFight je oceňovaná kreativní agentura a jeho webové stránky jsou hodně zábavné. Zakladatelé Jonny Lander a Leigh Whipday se změnili ve 3D postavy, které se objevují v řadě scén po celém webu (včetně této drzé Sagmeister & Walshovy reference). Chytré použití paralaxy zesiluje 3D efekt a ve spojení s odvážným, jasným a prostým pozadím nikdy nebude ohromující nebo dráždivé.

Diesel: ŠPATNÝ průvodce

84.Paříž vytvořila tento působivý web paralaxy (a související kampaň na sociálních médiích), který doprovázel uvedení vůně Diesel BAD. Jednostránkový web představuje řadu pravidel, která tvoří „BAD Guide“.

Uživatel to může prozkoumat tažením myši po stránce paralaxy, která je rozložena jako nástěnka obrázků, na které se má proklikávat. Od Tinderu je k dispozici rada („Přejeďte doprava, doprava, doprava, doprava – roztřídíte je out later „) na Instagram („ Nezapomeňte kontaktovat ex ve čtvrtek #TBT „) doprovázené černobílými ilustracemi.

Firewatch

Jeden z nejkrásnější příklady rolování paralaxy, které jsme viděli, je tento web pro hru Firewatch, která používá šest pohyblivých vrstev k vytvoření pocitu hloubky. Je to skvělé, protože nedochází k únosu svitku (něco, co často doprovází paralaxový efekt), a používá se pouze v horní části stránky – zbytek webu je stále, takže si můžete přečíst informace, aniž byste onemocněli. Pokud chcete vidět, jak se to dělá, tady je pěkná ukázka na CodePen.

GitHub 404

Stránka 404 GitHubu není striktně paralaxní rolování, protože účinek se projevuje na kroucení myší na rozdíl od posouvání, ale je to opravdu zábavná stránka, která pomocí vrstvení přidává hloubku. Na rozdíl od „správné“ paralaxy se pozadí pohybuje rychleji než v popředí a vytváří dezorientující pocit z jiného světa.

Jess & Russ

Není žádným překvapením, že svatební web designérského páru Russ Maschmeyer a Jessica Hische je krása na pohled. Stránka mapuje jejich romantický příběh, přičemž k doplnění hloubky ilustrací se používá rolování paralaxy. Vzali se v roce 2012, ale web stále stojí za to si je prohlédnout.

Vydělávejte své peníze

Finance a peníze jsou stěží nejzajímavější předměty. Newyorská digitální agentura Firstborn je ale s tímto dynamickým webem pro rolování paralaxou Vydělávejte své peníze pro úvěrovou unii veřejné služby.

S cílem naučit veřejnost výhody vstupu do družstevní záložny, místo toho, aby používal banku, tento brilantní web obsahuje vše od toho, jak funguje družstevní záložna, kde ji najdete a jak ji podat, a také kalkulačku, která ukazuje, kolik bank těží z vkladů zákazníků.

Madwell

Designová a vývojová agentura Madwell se sídlem v New Yorku předvádí své portfolio s řadou paralaxových rolovacích efektů a vytváří nápadný 3D styl, který přidává obrovský množství hloubky.

New York Times: Tomato Can Blues

Jak v dnešní době nízké pozornosti a sdělovacích prostředků přitahujete lidi k dlouhodobé žurnalistice? Tomato Can Blues je skvělou odpovědí na tento problém New York Times a kombinuje některé chytré techniky webového designu s vyprávěním příběhů a komiksovými ilustracemi vytvořenými Atillou Futaki.

Jeden z nejlepších příkladů rolování paralaxy „Viděli jsme, že článek vás provede příběhem bojovnice v kleci, kterou napsala Mary Pilon. Jak procházíte obsahem, ilustrace ožívají chytrými animacemi a změnami, které vám umožní plně se ponořit do obsahu.

Futakiho ilustrace byly založeny na policejních záznamech, svědeckých záznamech, fotografiích a poznámkách reportéra a pozornost k detailům prosvítá. Celkově vzato je to skvělý zážitek ze čtení – je to budoucnost online žurnalistiky ?

Sněžení

Jeden z prvních webů Opravdu posuňte hranice toho, co můžete dělat s dlouhověkým redakčním obsahem online, článek New York Times „Snow Fall kombinuje řadu různých prvků, včetně rolování paralaxy a webového videa.

Článek o hrůze laviny v Tunnel Creek byl publikován online v prosinci 2012, ale stále je silný jako příklad toho, co můžete dělat s rolováním paralaxy. Noviny představily Pulitzerovu článek inovativním způsobem, který upoutal pozornost návrhářské komunity po celém světě.

• 19 opravdu užitečné reakce výukové programy pro webdizajn
• nejlepší externí pevné disky
• skvěle navržené stránky 404 chyb