Dlouhodobě se specializuji na přípravu komplexních systémů pro tvorbu Lottie animací. V rámci těchto systémů je možné měnit mnoho nastavení a využít je lze pro přípravu výsledků z vašich podkladů. Velice snadno a rychle tak můžete pro svůj web získat nepřehlédnutelné animace pro mnoho účelů.
KOMPLEXNÍ SYSTÉMYLottie animace jsou nepostradatelnou součástí moderních webových stránek. Mezi hlavní výhody těchto webových animací patří ostré zobrazení při jakémkoli zvětšení a malá velikost souboru, která neovlivní rychlost načítání stránek.
Lottie animace můžete používat na svém webu i vy, protože je lze vkládat prostřednictvím integrací LottieFiles s různými platformami nebo prostřednictvím kódu. Vše potřebné se dozvíte na stránce Jak vložit Lottie animace na web pomocí HTML. Stránky Video Slideshow jsou tvořeny v systému Webflow, kde lze vložit a nastavit Lottie animace snadno a rychle.
Pro firemní zákazníky je důležitá informace, že designově je možné Lottie animace sladit s firemní identitou. Na krátké představení Lottie animací se můžete podívat např. v tomto videu.
Tvorba Lottie animací má mnoho omezení. Vzhledem k detailní znalosti všech součástí, které lze při tvorbě využít a které nikoli, jsem vyvinul vlastní propracované pracovní postupy, díky kterým dokážu překonat mnohá omezení a připravit pro váš web webové animace, který nikde jinde neuvidíte.
Kromě Lottie animací tvořím také gify a krátká background videa, protože všechna řešení mají své vlastní výhody. Rád v těchto formátech pro vaši firmu připravím webové animace, které výrazně zlepší uživatelský dojem, zapojení návštěvníků webu a výkon SEO. Nechte se inspirovat návrhy zajímavých webových animací pro své webové stránky, které lze samozřejmě využít i při tvorbě běžných videí.
Lottie animace, gify a background videa vám dodám v nejmenší možné optimalizované velikosti při zachování kvality zobrazení. Rád vám také poradím, jak lze Lottie animace vložit i na vaše webové stránky.
I přes malou velikost ve srovnání s ostatními možnostmi, je vhodné mít na webové stránce pouze rozumný počet Lottie animací. Pro prezentování všech připravených možností na této stránce byla zvolena forma background videí. V případě zájmu o ukázku funkčnosti jakékoli Lottie animace naživo online mne prosím kontaktujte!
K vytvoření animace tohoto typu vede cesta, která má několik fází: rozdělení grafiky na tvary, volitelná redukce počtu těchto tvarů a samotné nastavení morfování.
NAVŠTÍVIT STRÁNKUSystém pro tvorbu Lottie animací rozdělením na části rotující v 3D prostoru umožňuje kombinovat mnoho voleb nastavení a dosahovat zajímavých výsledných animací.
NAVŠTÍVIT STRÁNKU
U Lottie animací mohou být nastaveny interakce tak, aby k jejich přehrání došlo po najetí myší. Proto je možné je připravovat přímo pro tento druh interakcí.
Nakrájený grafický efekt VS001IN může být aplikován na jakoukoli vektorovou grafiku, rozkrájení může být méně či více detailní, ve zvoleném úhlu a při přehrání Lottie animace může dojít i ke změně barvy, kdy na začátku je grafika celistvá a 1barevná a poté se změní pozice jednotlivých prvků i jejich barva.
Nakrájený grafický efekt může mít mnoho podob a další jeho varianty si můžete prohlédnout na webu WEB147.CZ.
Lottie animace v ukázce níže obsahuje 287 tvarů a má velikost 21 kB.
Glitch je velice populární a poutavý efekt, který standardně není příliš složitý na přípravu. Vzhledem k tomu, že ale v Lottie animacích jej není možné dosáhnout pomocí efektů, tak jej pravděpodobně téměř nikde na webových stránkách v podobě Lottie animací nenaleznete.
Připravil jsem řešení, kterým lze tohoto efektu dosáhnout i pro Lottie animace. Jakoukoli vektorovou grafiku mohu roztříštit do desítek či stovek jednotlivých tvarů, které jsou následně samostatně animovány. Můžete tedy pro své webové stránky získat zcela jedinečný a efektní grafický prvek.
Můžete si objednat přípravu glitch efektu aplikovaného na svůj text v jakémkoli fontu či jakoukoli dodanou vektorovou grafiku. Jen je třeba, aby se jednalo vždy o 1barevnou výplň a nikoli barevný přechod.
Roztříštění může být více či méně detailní dle vašich požadavků. Čím je detailnější, tím je větší výsledná velikost JSON souboru. Různé úrovně detailnosti si můžete prohlédnout v příkladech níže. Existují 2 základní podoby provedení - bez a s animovanou průhledností u všech tvarů. V případě bez ní lze počítat s velikostí výsledného souboru cca 3,40 kB/tvar. V případě s ní je to cca 4,67 kB/tvar.
VS156LO je systém připravený pro zobrazování 2 a více grafik na opačných stranách mnoha dílů. Oboustranné vrstvy v běžných animacích standardně není složité připravit. V případě Lottie jsem ale musel připravit zcela odlišný způsob, díky kterému je zobrazování na webech možné.
Zobrazovanými designy mohou být nejen texty a vektorové grafiky, ale také fotografie! V současné době je možné využít např. formát souboru fotografií WebP, který umožňuje dosáhnout vyšší úrovně komprimace při zachování kvality fotky. V případě zájmu o využití tohoto systému s fotkami je vhodné dodat fotky v max. rozlišení, které využijete. Soubor JSON je následně exportován s vloženými dodanými fotografiemi bez jejich změny. Tímto způsobem lze zrychlit přípravu Lottie.
V ukázkách níže si můžete prohlédnout již připravené animace (a další se připravují). Jedná se o různé poměry stran dle počtu dílů (5:5, 6:4, 8:4, 10:3, 15:2) a animaci s nestejnými 49 díly. Změna mezi grafikou přední a zadní strany probíhá pomocí rotace, která může probíhat na ose X, ose Y nebo na obou osách současně. Způsob postupného náběhu dílů může být nastaven jakkoli. Stejně tak může být nastavena různá doba zobrazení.
Systém může být použit pro efektní střídání 2 a více grafik nebo pro náběh jedné grafiky, která následně zůstane zobrazena nebo se může jednat o postupné zmizení dílů zobrazené grafiky, které odhalí obsah umístěný pod ní. I díky jediné takové Lottie animaci se váš web stane nápaditým a zapamatovatelným.
Prezentované ukázky Lottie animací jsou polotovary, které je možné vždy dopracovat do designu na míru pro vaše webové stránky. Mohou tak být vytvořeny z vybraného fontu, s vybranými barvami, doplněny logem firmy, jejich jednotlivé prvky mohou být nahrazeny jinými atp.
Je vždy také dobré si předem určit, zdali animace poběží v opakující se smyčce nebo budou spouštěny po najetí myši, kliknutím na nějaký prvek na stránce či při otevření webové stránky nebo po jejím načtení a dle toho bude Lottie animace připravena.
