Webová animace je veselá, zábavná, téměř vždy pohodlná (nebo extrémně nepohodlná, může se stát cokoli) a právě teď je velmi módní.
Pokusili jsme se zjistit, které pohyblivé obrázky jsou v módě než jiné. Studovali jsme články o trendech 2020-2021, procházeli jsme webem awwwards.com, zkoumali jsme projekty, kterými se designéři a programátoři chlubí.
Řekneme a ukážeme, co jsme našli.
0. Proč je to všechno?
Pohodlí … Animace je někdy skvělý nástroj, který vám pomůže pochopit, která tlačítka stisknout, kam jít, na co se dívat.
Krása . Animace může být čistě dekorativní. Jen způsob, jak upoutat pozornost uživatele.
Historie . Nakonec animace někdy vypráví příběh a vytváří emocionální spojení mezi rozhraním a uživatelem.
1. Vyprávění příběhů
Tento trend je jaksi obtížný: hodně o tom mluví, ale jako příklad přetahují stejný obrázek z článku do článku, a ne moc a nový. Opravdu dobré:
Stále chci novější příklad, ve kterém můžete strčit prst a říct – ach, historie prošla.
Vynikající příklad: články o příbězích Kayma.
Při procházení článku (například v tomto) se prvky animace objevují a mění na pravém okraji a vytvářejí krátký, ale docela srozumitelný příběh.
Příklady kódu pro ty, kteří chtějí udělat něco podobného:
2. Načítání animace
Během načítání stránky může uživatel přepnout na jiný web a po návratu zapomene, proč vůbec přišel.
< p> Rychlý internet vytvořil netrpělivé uživatele a načítání animací, které upoutají jejich pozornost, je opět trendy.
1. Animace s procenty nejen pobaví čekajícího uživatele, ale také ho informuje, že na něj není dlouho čekat. To platí také pro ukazatele průběhu, ale pokud vidíme, weboví designéři nyní dávají přednost číslům před pruhy.
2. Načítání obrázků neslibuje uživateli nic konkrétního, ale odvede dobrou práci při zábavě a udržení.
3. Stále ukazatele pokroku. Stará dobrá načítací lišta.
Co si o tom všem myslíme. Trendy, ne trendy, ale pokud se web načítá déle než pár sekund, je nutná animace načítání.
Nějaký kód pro ty, kteří chtějí dělat sami sebe: https://codepen.io/Manoz/pen/pydxK, https://codepen.io/aurer/pen/jEGbA, https://codepen.io/psyonline/pen/yayYWg, https: //codepen. io/dissimulate/pen/vlfyA, https://codepen.io/tashfene/pen/raEqrJ, https://codepen.io/jackrugile/pen/bjuCf
3. Kurzorové efekty
Kurzorové efekty byly šíleně populární už v minulém století – ai tehdy byly beznadějně zastaralé. Kdo řekl, že nemůžete jít do módy dvakrát?
V seznamech trendů v roce 2021 si efekty kurzoru nevšimnete, ale téměř každý druhý web na adrese https://www.awwwards.com/váže nějakou animaci pro pohyb kurzoru. Například:
Některé příklady jsou nesmyslné, nemilosrdné a v rozporu se zdravým rozumem:
Co si o tom všem myslíme. Volali z devadesátých let a žádali o návrat trendu.
Příklady s kódem pro ty, kteří si mysleli: „Bylo by hezké to udělat“ (nebo „Ano, napsal jsem to v ZÁKLADĚ“):
4. Kinetická typografie
Jinými slovy dynamická písmena. Pro ty, kteří mají jen písmena, je to nuda.
Co si o tom všem myslíme. Zajímavá typografie v pohybu pomáhá udržovat pozornost uživatele na text, ale brání mu v čtení. Vhodné pro krátké, předvídatelné texty. Pokud je kinetická typografie způsob, jak se chlubit tím, že autor dokáže udělat AfterEffect a zároveň vyjádřit nenávist k písmenům, pak raději ne.
Příklady s kódem. A můžete to udělat například takto:
https://codepen.io/Valgo/pen/PowZaNY, https://codepen.io/amit_sheen/pen/mdmJNYz, https://codepen .io/OscarTBeamish/pen/vqdrEw
5. Efekty přechodu myši
Uživatel se podívá na místo, kde je umístěn kurzor. Nebo naopak. Je zajímavé to udělat – myšlenka je zcela zřejmá a docela rozumná. Efekty přechodu tedy nikdy nevypadnou ze stylu.
Co si o tom všem myslíme. Udělejte něco při přejetí myší. A bez myší – my ne. Schvalujeme. Nenápadný a klidný.
Udělejte to sami. Efekty přechodu jsou jedním z nejjednodušších typů animace, které je třeba implementovat. Vypadá to, že jakýkoli nástroj pro tvorbu webových stránek umožňuje přidávat efekty přechodu. Ale pokud chcete, můžete to udělat sami. Několik příkladů efektů jednoduchého přechodu: https://codepen.io/nxworld/pen/zynobz, https://codepen.io/hexagoncircle/pen/XWbWKwL, https://codepen.io/brownsurfing/pen/LYypPPQ, https : //codepen.io/Jhonierpc/pen/MWgBJpy
7. Rolování v šílených směrech
Zdá se velmi módní přetočit obrazovku špatným směrem. Vlevo, vpravo, nahoru, šikmo, se změnou směru.
Takto: https://soviet-design.com/, https://typographyprinciples.obys.agency/, https: //www.fern.team/.
< span class = "ui_preloader__dot">
Z důvodu lidskosti nebudeme zobrazovat více obrázků. Ale jejich temnota.
Co si o tom všem myslíme. Žádný komentář.
***
Chcete se hádat nebo ukázat ostatním příklady? Čekáme na komentáře.
Nerozloučíme se. Ve druhé části si povíme o stylech a stylistických technikách webové animace.
