Máte na svém webu animace? Řekneme vám, proč jim dát šanci

Prostředek k přirozenějšímu zážitku

Animované prvky jsou na webu pro lidské oko výrazně příjemnější, když jsou plynulé. Ve skutečném životě se také nic nepohybuje přerušovaně. Pokud pohyb není hladký, náš mozek ho nevnímá přirozeně. Musíme pak vynaložit více úsilí a pozornosti, abychom se zorientovali v tom, co se kolem nás děje. Špatná animace může také upozadit okolní obsah, který uživatel nedokáže vnímat. 

Příkladem nám může být web největšího poskytovatele leasingů v Anglii. Web je sice nezapomenutelný, co se efektů týče, ale schválně, jestli si zapamatujete alespoň jedno slovo, které vidíte...

Při navrhování animací myslete i na fyzikální vlastnosti a pracujte s nimi. Příkladem budiž nám tíhové zrychlení, kdy létajícímu předmětu chvíli trvá, než nabere tu správnou rychlost. Dopadající předmět se taky obvykle od země vždycky alespoň trochu odrazí. Tedy ať i vaše animace vypadá co nejvíce věrohodně.

Jaký typ animací chcete?

Animace můžeme rozdělit na dvě hlavní kategorie:

• mikroanimace (jednoduché animace fungující jako podpora obsahu) 
• animace jako obsah (komplexní animace, která sama reprezentuje obsah)

Použití konkrétního typu animace záleží na hlavně na tom, čeho chcete animací docílit a jaký prvek webu je potřeba rozpohybovat.

Pravidelné návštěvy ocení střídmost

Pokud chcete animace pro svůj e-shop, interní systém nebo aplikaci, kterou uživatel často využívá, není žádoucí klást důraz na složitost a ohromovat množstvím efektů. Takový typ animace sice uživatele napoprvé zaujme, ale při opakovaných návštěvách ho pak bude zdržovat a velmi pravděpodobně ho bude nakonec i obtěžovat. V nejhorším scénáři to může dopadnout tak, že uživatel přestane vaši aplikaci používat. 

V tomto případě je tedy vhodné využít spíše mikroanimace či jednoduché animace, které umí zaujmout. Především se díky nim stane uživatelské rozhraní pro oko příjemnější a přehlednější. 

Skvěle pro tento účel slouží animace:

• tlačítek
• pop-up oken
• bannerů
• animace při načtení obsahu

Speciální efekt lidské oko nezarmoutí

V případě prezentačního webu, galerie či portfolia je lepší použít naopak komplikovanější a komplexní animace, které uživatele na první pohled zaujmou. Zvýšíte tím pravděpodobnost jejich opětovné návštěvy nebo dokonce sdílení dalším lidem. Komplexní animace lze naprogramovat tak, aby dokázaly vyprávět klidně celý příběh, přitáhly pozornost potenciálních klientů nebo vizuálně atraktivním způsobem propagovaly vás samotné či váš produkt. 

A toužíte-li po něčem zvláštním, můžete animace nastavit tak, aby reagovaly zcela náhodně na určité podněty. To může být:

• vstup uživatele
• pohyb myši
• zvuk z mikrofonu
• vybraná hudba

Tomuto typu animací se říká generativní, protože pokaždé je váš zážitek z nich zcela unikátní.

Implementace animace

Vybrali jste si typ animace, konkretizovali představu a grafik vám ji připravil. Teď přichází na řadu front-endový vývojář a jeho um, díky kterému animaci dostanete na svůj web. 

Nejčastěji k tomu využíváme tyto vybrané technologie:

CSS

Výhodou využití CSS animací je především jejich nízký objem dat, vysoká efektnost a fakt, že nevyžadují jakékoliv externí knihovny pro svou implementaci. Zároveň není potřeba použití JavaScriptu.

JavaScript

V porovnání s CSS animacemi nabízí JavaScriptové animace mnohem více svobody. Jejich nevýhodou je však nutnost externí knihovny. Skrze ni vývojář implementuje animace na web. JS Frameworky obvykle nabízí už hotové základní animace: například zvětšení, odlétnutí či otočení.

SVG

SVG je vektorový formát vycházející z XML standardu. Ideální je v případě, kdy chcete na web umístit jednoduchou grafiku nezávislou na rozlišení – například ikony či logotypy. Vektorovou grafiku lze totiž libovolně zvětšovat či zmenšovat bez ztráty kvality, zároveň je však datově úsporná. Nevýhodou SVG animací je vytváření fallbacků (alternativních řešení pro případ, že nejsou podporovány SVG animace). SVG také nedoporučujeme využívat pro komplexní animace. 

Canvas a WebGL

Canvas a WebGL API umožňuje animace skrze JavaScript a HTML5 prvek <canvas>. Canvas API se nejčastěji používá na kreslení 2D grafiky a hravě si poradí i s animacemi hýřícími barvami a složitými prvky. Druhou možností, také v HTML5, je pak WebGL API, který doporučujeme využívat na 2D a 3D animace. WebGL ocení i návštěvníci webů se složitými animacemi, protože tento framework zvládne až 60 obrázků za sekundu. 

A jaké můžete mít animace na webu?

Menu

Chcete zákazníkům zpříjemnit co nejvíce zážitek z pobytu na vašem webu? Vyhrajte si i s těmi nejmenšími detaily – jednou takovou je například animace hamburger menu v mobilním zobrazení. Funkční a pro oči velmi příjemný jemný pohyb, při kterém se zobrazí kompletní nabídka vašeho webu. V příkladu vidíte web, který jsme připravovali pro klienta IRLaB

Carousel a animace v záhlaví

I carousel řadíme mezi animace. Víme, že mezi webaři se jedná o velmi často propíraný prvek, který má své příznivce i odpůrce – máte-li na svém webu či e-shopu pro jeho využití opodstatnění, říkáme: „Směle do něj!”

Animace v záhlaví, které ozvláštňují textové sdělení, najdete i na našem webu. Takto třeba vypadá stránka s nabídkou enterprise řešení.

Animace při scrollování

Upoutat zrak návštěvníků webu můžete i průběžně. Na webu pro Mercedes-Benz jsme vytvořili animaci, kdy se jednotlivé sekce postupně objevují.

Dekorativní animace

Některé animace mohou plnit designovou funkci. Tyto v ukázce sice nejsou z naší tvorby, ale líbí se nám natolik, že vám je zkrátka nemůžeme neukázat.

Dynamické animace na pozadí

I když zrovna na něčem pracujete, mohou vám na pozadí běžet jemné animace, které vám to soustředění alespoň trochu zpříjemní. Animaci poletujících světlušek ve svitu nočního města si užijete při programování.