Animace a efekty webu

Animace dodají webu život: úvod se při načtení poskládá, sekce se objevují, jak návštěvník roluje, a karty reagují na myš. Míru pohybu nastavíte jedním kliknutím pro celý web. Sekce se kvůli tomu nepřepisují, efekty přidává web sám při zobrazení.

Kde se efekty nastavují

1. Otevřete VzhledV editoru přepněte na Vzhled a najděte kartu Animace a efekty.
2. Vyberte stupeňNa výběr jsou tři tlačítka: Bez animací, Jemné a Výrazné. Každé tlačítko ukazuje malou ukázku pohybu.
3. HotovoVolba se uloží hned, nahoře uvidíte „Ukládám…“ a „Uloženo“. Náhled se načte znovu a změna se projeví v náhledu i na webu.

Stejně to jde v chatu: „Vypni animace.“ nebo „Nastav jemné animace.“

Nový web má nastavený stupeň Výrazné. Starší weby, které měly zapnuté animace ještě v původním nastavení, mají Jemné.

Bez animací

Obsah je vidět hned a nic se nehýbe. Web se načte celý najednou, karty ani tlačítka na myš nereagují pohybem.

Prohlížeč fotek v galerii, karusel a mapa fungují dál, protože je návštěvník potřebuje k prohlížení, ne pro ozdobu.

Jemné

Pohyb je nenápadný a krátký. Co dělá:

• Úvod se poskládá: nadpis, text a tlačítka úvodní sekce přijedou při načtení krátce po sobě a fotka vedle textu se objeví. Běží to hned při načtení, stránka neblikne.
• Sekce se objevují postupně: jak návštěvník roluje, sekce se jemně zviditelní. Položky mřížek (služby, výhody, kroky, fotky v galerii) se objevují krátce po sobě.
• Drobnosti v kartách: ikona v kartě naskočí chvilku po kartě, ozdobné linky se natáhnou a spojnice mezi kroky postupu se kreslí shora.
• Načítání fotek: fotka, která se ještě načítá, má místo prázdné plochy jemný třpyt a po načtení se zaostří.
• Reakce na myš: karty se při najetí mírně zvednou a přes hlavní tlačítka přejede odlesk.
• Hlavička: po odrolování dostane stín a průsvitné pozadí.
• Tlačítko nahoru: na dlouhé stránce se po odrolování objeví vpravo dole kulaté tlačítko, které vrátí návštěvníka na začátek.

Výrazné

Všechno z jemného stupně a k tomu:

• Nadpisy sekcí se vysunou zpod neviditelné hrany.
• Položky mřížek přijíždějí zdola po jedné, s delším odstupem mezi sebou.
• Fotky za oponou: fotka vedle textu (třeba v sekci O nás nebo u videa) se odhalí shora dolů jako za oponou a jemně doostří.
• Úvodní fotka se po načtení velmi pomalu přiblíží.
• Paralaxa: fotka na pozadí úvodu a výzvy k akci jede při rolování pomaleji než stránka, takže vznikne dojem hloubky.
• Čísla se načítají: v sekci Čísla se hodnoty při objevení napočítají od nuly ke skutečné hodnotě. Text kolem čísla (třeba „let“) zůstane.
• Světlo pod kurzorem: po kartě se při pohybu myši posouvá jemné světlo v barvě webu. Na dotykových zařízeních se nezapíná.
• Fotky v galerii a v nabídce se při najetí myší mírně zvětší.
• Ukazatel přečtení: tenký pruh v barvě webu nahoře na obrazovce ukazuje, kolik stránky už návštěvník přečetl.

Co na stupni nezávisí

Plynulý přechod mezi stránkami webu (stará stránka se rozplyne, nová přijede) a otáčení plusu na křížek v Častých otázkách s odpovědí, která vyjede, nejsou vázané na zvolený stupeň. Přechod mezi stránkami uvidí jen ti, jejichž prohlížeč ho umí.

Co animace nedělají

• Nic neposkakuje dokola. Každý prvek se objeví jednou a pak zůstane v klidu.
• Co je při načtení stránky už vidět, se neschovává, takže obsah neblikne.
• Obsah nikdy nezůstane neviditelný. Kdyby prohlížeč rolování z nějakého důvodu nesledoval, web ukáže všechno sám.

Ohled na lidi s vypnutými animacemi

Někteří lidé mají v nastavení systému nebo telefonu zapnuté omezení pohybu. Pohyb na obrazovce jim může způsobovat nevolnost, nebo je prostě ruší. Web to pozná sám a takový návštěvník neuvidí nic z efektů popsaných výše: obsah dostane rovnou, bez přijíždění, třpytu a paralaxy. Vypne se i plynulé rolování k odkazům uvnitř stránky a přechody v prohlížeči fotek.

Nemusíte nic nastavovat a nemusíte kvůli těmto lidem animace vypínat. Karta ve Vzhledu to připomíná větou: návštěvník s vypnutými animacemi v systému uvidí web bez pohybu.

Nevidíte v náhledu žádný pohyb, i když máte zvolené Výrazné? Zkontrolujte, jestli nemáte omezení pohybu zapnuté ve vlastním počítači nebo telefonu.

Který stupeň zvolit

Efekty mají ladit s tónem webu. AI podle oboru volí tón textů (řemeslník mluví věcně, kavárna přívětivě, ordinace klidně) a stejně můžete uvažovat o pohybu:

Nejste si jistí? Přepněte stupeň a projděte web v náhledu na počítači i na telefonu (přepínač Počítač / Tablet / Telefon nad náhledem). Změnu jde kdykoli vrátit.

Co dál

• Galerie a fotky na webu: prohlížeč fotek a rozvržení galerie.
• Úpravy webu přes chat: vzhled a efekty jde nastavit i zprávou.
• Úprava textu klikem v náhledu: rychlé opravy bez AI.
• Adresa webu a zveřejnění: kdy se změny objeví na webu.