Lottie animace a gify

Značná část návštěvníků webových stránek odmítá interagovat s neatraktivními weby. Nejvážnějšími důvody neatraktivity jsou na jedné straně použití pouze statických obrázků a na druhé nevhodné formáty videa, které ovlivňují rychlost načítání stránek a poškozují konverze a tržby. Naše mysl je podvědomě nastavena, aby ignorovala statický obsah, proto doporučuji přidat na vaše webové stránky pohyblivý obsah v nejvhodnějších formátech.

Jsou jimi Lottie animace a gify, které jsou nepostradatelnou součástí každých moderních webových stránek. Obě řešení mají své výrazné výhody. Rád v obou těchto formátech pro vaši firmu připravím animace, které zaujmou. Na krátké představení Lottie animací se můžete podívat např. v tomto videu.

Nechte se inspirovat návrhy zajímavých animací pro webové stránky, které samozřejmě lze využít i při tvorbě jakýchkoli videí. Lottie animace a gify vytvořené na míru mohou být nepřehlédnutelnou součástí vaší video corporate identity.

Lottie animace i gify vám dodám v nejmenší možné 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 menší velikost ve srovnání s ostatními možnostmi, je vhodné mít na webové stránce pouze tolik Lottie animací, kolik neovlivní rychlost načítání stránky. Z tohoto důvodu si zde můžete většinu nabízených Lottie animací prohlédnout pouze ve zobrazení pro desktop!

Tvorba Lottie animací má mnoho omezení. Vzhledem k hluboké znalosti všech součástí, které lze při tvorbě využít a které nikoli jsem si vyvinul vlastní propracované pracovní postupy, díky kterým dokážu obejít mnohá omezení a připravit pro vás výsledek, který často nikde jinde neuvidíte.

Ukázky Lottie animací

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.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Texty nebo jakékoli jiné prvky se nejprve ze středu rozmístí na kružnici a následně se pohnou do finálního umístění.

Náběh může být jednotný nebo postupný.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Texty nebo jakékoli jiné prvky se nejprve ze středu rozmístí na kružnici a následně se pohnou do finálního umístění.

Náběh může být jednotný nebo postupný.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Texty nebo jakékoli jiné prvky se nejprve ze středu rozmístí na otevřenou cestu a následně se pohnou do finálního umístění.

Otevřená cesta může může mít jakýkoli tvar..

Náběh může být jednotný nebo postupný.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Texty nebo jakékoli jiné prvky se nejprve ze středu rozmístí na otevřenou cestu a následně se pohnou do finálního umístění.

Otevřená cesta může může mít jakýkoli tvar..

Náběh může být jednotný nebo postupný.

Přehrát
Lottie animaci
Skrýt
informace
Zobrazit
informace

Texty nebo jakékoli jiné prvky se nejprve ze středu rozmístí na uzavřenou cestu a následně se pohnou do finálního umístění.

Uzavřená cesta může může mít jakýkoli tvar, např. výrazného loga.

Texty nebo nebo jakékoli jiné prvky mohou být natočeny v úhlu 0 nebo směrem ke středu cesty.

Náběh může být jednotný nebo postupný.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Postupné naběhnutí celkového obrazu po jeho částech. Může tak být zobrazen např. technický výkres, poskládána vektorová kresba nebo i rozřezaný obrázek.

Naběhnutí může být odshora dolů nebo zcela náhodné, záleží na podkladech nebo přípravě podkladů na míru.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Postupné naběhnutí celkového obrazu po jeho částech odshora dolů s přiblížením a finálním oddálením pro zobrazení celého obrazu. Může tak být zobrazen např. technický výkres, poskládána vektorová kresba nebo i rozřezaný obrázek.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka loaderu, tj. animace zobrazené při čekání na načtení webové stránky.

Kulečníkové koule mohou být nahrazeny např. míči, logem v kruhu nebo jakýmikoli jinými prvky.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka loaderu, tj. animace zobrazené při čekání na načtení webové stránky.

Kulečníkové koule mohou být nahrazeny např. míči, logem v kruhu nebo jakýmikoli jinými prvky.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka jednoduché animace, které je možné dosáhnout mnoha způsoby. Výhoda jejího provedení pomocí Lottie animace je v možnosti odhalení loga ve velké velikosti.

Odhalení může proběhnout v jakémkoli úhlu.

Nakrájená grafika

VS001IN

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í. Skvělou možností zajímavé Lottie animace je 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 446 kB.

Glitch

VS155LO

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.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka na textu GLITCH. Grafika je rozdělena do 238 tvarů, každý s náhodným výběrem ze 6 barev a glitch efekt je vč. náhodné průhlednosti jednotlivých tvarů.

Velikost Lottie je 1103 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka na textu GLITCH. Grafika je rozdělena do 238 tvarů, každý s náhodným výběrem ze 6 barev a glitch efekt je bez náhodné průhlednosti jednotlivých tvarů.

Velikost Lottie je 802 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka na textu GLITCH. Grafika je rozdělena do 136 tvarů, každý s náhodným výběrem ze 6 barev a glitch efekt je vč. náhodné průhlednosti jednotlivých tvarů.

Velikost Lottie je 635 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka na textu GLITCH. Grafika je rozdělena do 136 tvarů, každý s náhodným výběrem ze 6 barev a glitch efekt je bez náhodné průhlednosti jednotlivých tvarů.

Velikost Lottie je 463 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka na textu SALE. Grafika je rozdělena do 134 tvarů, každý s náhodným výběrem ze 6 barev a glitch efekt je vč. náhodné průhlednosti jednotlivých tvarů.

Velikost Lottie je 625 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka na textu SALE. Grafika je rozdělena do 134 tvarů, všechny ve stejné barvě a glitch efekt je vč. náhodné průhlednosti jednotlivých tvarů.

Velikost Lottie je 625 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka na textu SALE. Grafika je rozdělena do 134 tvarů, všechny ve stejné barvě a glitch efekt je bez náhodné průhlednosti jednotlivých tvarů.

Velikost Lottie je 456 kB.

Líc a rub

VS156LO

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.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení na 49 nestejných dílů. Rotuje současně osa X i Y. Všechny díly nabíhají postupně.

Velikost Lottie je 354 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení na 49 nestejných dílů. Rotuje současně osa X i Y, a to vždy 3x. Všechny díly nabíhají postupně.

Velikost Lottie je 354 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení na 49 nestejných dílů. Rotuje osa Y. Všechny díly nabíhají postupně.

Velikost Lottie je 306 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka "d3" = rozdělení pouze v 1 směru - horizontálním nebo vertikálním. "v2" značí poměr stran 16:9. V této ukázce jde o rozdělení na 10 dílů. Rotuje pouze 1 osa. Všechny díly začínají vždy nabíhat současně, ale doběhnou postupně. Tato základní varianta je vhodná i pro menší prvky jsou jsou webová tlačítka.

Velikost Lottie je 68 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka "d3" = rozdělení pouze v 1 směru - horizontálním nebo vertikálním. "v2" značí poměr stran 16:9. V této ukázce jde o rozdělení na 10 dílů. Rotuje pouze 1 osa. Všechny díly začínají vždy nabíhat současně, ale doběhnou postupně. Tato základní varianta je vhodná i pro menší prvky jsou jsou webová tlačítka.

Velikost Lottie je 80 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka "d3" = rozdělení pouze v 1 směru - horizontálním nebo vertikálním. "v3" značí poměr stran 3:2. V této ukázce jde o rozdělení na 15 dílů. Rotuje pouze 1 osa. Všechny díly začínají vždy nabíhat současně, ale doběhnou postupně. Tato základní varianta je vhodná pro prvky střední velikosti.

Velikost Lottie je 109 kB.

Morfování

VS161LO

Systém morfování je připravený pro přeměnu 2 a více grafik mezi sebou, a to pomocí změny pozic tvarů, které je tvoří. Systém je připravený pro mnoho alternativ a stejně tak pracovní postup obsahuje pro každou alternativu odlišné kroky.

Pozice tvarů mohou být získány různými technikami v Adobe Illustratoru (návod si můžete prohlédnout zde) nebo spočítány přímo v After Effects. První možnost je náročnější na přípravu, ale skýtá možnost manuálního doladění designu výsledného grafického podkladu. Druhá možnost byla náročnější na přípravu, ale je rychlejší, ovšem plná automatizace neumožňuje jakékoli manuálního doladění.

Co se týká způsobu prolnutí, tak je možné si zvolit z variant zleva doprava, zprava doleva, shora dolů, zdola nahoru nebo ze středu. Je možné využít i nejkomplikovanější variantu, která odhaluje novou grafiku na základě aktuální pozice dalšího objektu, který se pohybuje přes aktuálně zobrazenou grafiku. V tom případě mění pozice vždy aktuálně nejbližší tvary pozici objektu.

Jsou připraveny délky trvání smyčky 6s a 10 s pro přeměnu 2 grafik a 9s a 15s pro přeměnu 3 grafik. Délka přeměny z jedné grafiky na druhou může být 1-3s. Morfování může probíhat nejen na textech, ale na jakékoli jiné grafice, která může být zobrazena pomocí tvarů. Tvary mohou být čtverec, kruh nebo i složitější vektorové obrazce. Je třeba mít na paměti, že jejich komplikovanost může značně zvýšit velikost výsledného JSON souboru. Lze si zvolit jinou barvu tvarů pro každou grafiku.

Lottie animace připravená systémem morfování tvarů vždy zaujme a i díky jediné takové Lottie animaci se váš web stane nápaditým a zapamatovatelným. Na míru vytvořenou Lottie animaci si můžete prohlédnout na webu společnosti MESSAG s.r.o.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení jednotlivých textů na nejmenší možný počet tvarů. Každý text má svou barvu, ale barva může být identická pro všechny texty.

Směr náběhu zleva doprava, tvary jsou kruhy, 9s smyčka.

Velikost Lottie je 182 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení jednotlivých textů na nejmenší možný počet tvarů. Každý text má svou barvu, ale barva může být identická pro všechny texty.

Směr náběhu zprava doleva, tvary jsou čtverce, 9s smyčka.

Velikost Lottie je 182 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení jednotlivých textů na nejmenší možný počet tvarů. Každý text má svou barvu, ale barva může být identická pro všechny texty.

Směr náběhu shora dolů, tvary jsou kruhy, 9s smyčka.

Velikost Lottie je 182 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení jednotlivých textů na nejmenší možný počet tvarů. Každý text má svou barvu, ale barva může být identická pro všechny texty.

Směr náběhu zdola nahoru, tvary jsou čtverce, 9s smyčka.

Velikost Lottie je 182 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení jednotlivých textů na nejmenší možný počet tvarů. Každý text má svou barvu, ale barva může být identická pro všechny texty.

Směr náběhu ze středu, tvary jsou čtverce, 9s smyčka.

Velikost Lottie je 182 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení jednotlivých textů na nejmenší možný počet tvarů. Ukázka identické barvy pro všechny texty a náběhu bez rotace a odsazení.

Směr náběhu zleva, tvary jsou čtverce, 15s smyčka.

Velikost Lottie je 395 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení jednotlivých textů na nejmenší možný počet tvarů. Každý text má svou barvu. Ukázka náběhu bez rotace a odsazení.

Směr náběhu zleva, tvary jsou čtverce, 15s smyčka.

Velikost Lottie je 395 kB.

Přehrát Lottie animaci Skrýt
informace
Zobrazit
informace

Ukázka rozdělení jednotlivých textů na nejmenší možný počet tvarů. Každý text má svou barvu. Ukázka náběhu s rotací a odsazením.

Směr náběhu zleva, tvary jsou kruhy, 15s smyčka.

Velikost Lottie je 395 kB.

Ukázky fungování systému a možností přizpůsobení naleznete také v tomto videu:

Postup objednání Lottie animací a gifů

OBJEDNÁVEJTE ZDE
Kliknutím na “Přijmout všechny cookies” souhlasíte s ukládáním souborů cookies na vašem zařízení za účelem zlepšení navigace na webu, analýzy používání webu a podpory našeho marketingového úsilí.
Správa předvoleb cookies