Animace na webu
Tentokrát něco málo o animacích na webových stránkách, které čím dál častěji vládnou světu a možná si zde odpovíte, zda je také chcete na svém webu.
4 minuty ke čtení vloženo před 5 roky
Při mé práci často narážím na požadavek „musí se to hýbat“ jinak to nechci. Na úvod bych měl i říct, že s tím souhlasím ale sám animace moc nemusím. Dost to zdržuje a pokud je to nevhodně zvolné, tak je to k ničemu. Návštěvníka to jen otráví. Třeba když je zpravodajský web plný animace, tak většinou lidi odchází. Tedy pokud je nezvládne dřív odradit reklama.
Osobně mám rád, když je animace využita jen v některých místech webu a třeba by i pobavila. Myslím animované grafy v internetovém bankovnictví, nebo když jsem hledat nějaké inspirace na UI Movement pro nahrávání souborů. U toho animovaného nahrávání se mi líbí i fakt, že snad úplně každý pochopí, co se právě děje. Ale to platí i třeba pro odhlášení, potvrzení formuláře, odeslání kontaktu aj.
Scroll animate
Často používané jsou animace při srolování po webu. Většinou se na při srolování dolů po obrazovce postupně objevují texty, jednotlivé sekce, obrázky apod. Případně se používají knihovny pro rychle posouvání po stránce. Takže máte button, který po kliknutí přesune úplně dolů nebo nahoru, na stránce. Pár knihoven jsem již prošel, takže zde je krátký seznam těch povedenějších.
- Sal.js
Jednoduchá knihovna pro animaci při scrolování. Využívá i SASS, což se může hodit.
https://mciastek.github.io/sal/ - Rellax.js
Pokud chcete na webu docílit takzvaného parallax efektu, kdy se jednotlivé prvky posouvají jinou rychlostí, je Rellax dobrý tip.
https://chriscavs.github.io/rallax-demo/ - Jarallax
Stejný případ, jako Rellax.js. Na demo webu je toho už celkem moc ale chápu, že chtějí ukázat co všechno to umí. Líbí se mi, že umí pracovat i s videi. Na konci je ukázka pro menší boxy, což nemusí být k zahození.
https://free.nkdev.info/jarallax/ - MoveTo
Jednoduchá knihovna pro poskakování po stránce nahoru/dolů.
https://hsnaydd.github.io/moveTo/demo/ - Jump.js
Jak už z názvu vychází, poskakování po stránce, stejně jako třeba předchozí MoveTo.
http://callmecavs.com/jump.js/
Slider/carousel
Slider nebo kolotoč. Asi jak kdo chce. Řada lidí na ně nadává nebo je kritizuje. Odborníci se shodují, že se neshodují. Někdo na nich trvá a někdo je zásadně odmítá. A já je mám celkem rád. Když jsou pěkný fotky i nápad, jako třeba na puravidashop.cz, tak je fajn, že má text nějakou animaci a lidi se pokochají super fotkou.
- Swiper Slider
Swiper používám a mám ho integrovaný do webdílny. V poslední verzi jej konečně aktualizovali, že jsou styly v SASS. Takže budu aktualizovat výchozí projekt webdílny, která tak bude mít všechny styly v SASS. Využití je vidět třeba na vstupní stránce mého webu nebo na zmíněném puravidashop.cz. Na mobilu funguje „šoupání“ prstem.
https://idangero.us/swiper/ - Slick
https://kenwheeler.github.io/slick/ - Flickity
https://flickity.metafizzy.co/
Osobně tvrdím, že by neměli být animované ovládací prvky stránky. U tlačítek jen decentní animace třeba změny barvy pozadí, což se dělá v SASS celkem jednoduše a nijak to návštěvníka nezdrží. Decentní animace vytváří příjemný pocit a uživatel s webem rád pracuje. Tedy za předpokladu, že vše funguje a stránky se rychle načítají. Což u některých knihoven nebo při použití mnoha knihoven může být problém.
Samozřejmě to, co je dobré na desktop nemusí být dobré na mobilu. Pokud máte, nebo tvoříte responzivní webové stránky, je potřeba zvolit vhodné řešení. Osobně hledám řešení, které nabízí třeba právě SASS pro styly. Jelikož to mohu zakomponovat do redakčního systému, mohu to libovolně stylovat a výsledkem je jeden CSS soubor. Tak hodně štěstí při rozhýbávání webu!
https://uimovement.com/design/dashboard-navigation/
Komentáře
Důležitá informace! Je potřeba vyplnit všechna políčka označená *. Děkujeme.
Timebat dixere habentia calidis? Pinus passim origine sed dixere cingebant. Otia partim haec nix deus liberioris. Surgere ambitae.