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 čtyři tlačítka: Bez animací, Jemné, Výrazné a Živé. 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.“, „Nastav jemné animace.“ nebo „Chci živé 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.
• Pohyb v konkrétních sekcích: podtržení pod vybranou záložkou se přesune a nový panel najede, zaškrtnutí v porovnání balíčků naskakují po řádcích, přeškrtnutí původní ceny v akci se nakreslí, spojnice mezi kroky postupu se postupně vybarví, horní linky otevřených sloupců se natáhnou a polaroidy dopadnou s mírným náklonem.

Živé

Všechno z výrazného stupně a k tomu věci, které reagují na návštěvníka. Hodí se pro mladé, tvůrčí a zábavné weby, ne pro úřední a vážné:

• Úvodní nadpis po slovech: slova nadpisu naskakují jedno po druhém.
• Tlačítka přitahovaná kurzorem: hlavní tlačítka v úvodu a ve výzvě k akci se kousek posunou za myší.
• Záře za kurzorem: v úvodu se pod myší rozsvítí jemná záře v barvě webu.
• Náklon karet: i běžné karty (služby, výhody, bloky v mřížce) se při najetí mírně nakloní.
• Pásy fotek plynou: posuvný pás fotek se při rolování stránky sám posouvá, dokud ho návštěvník nechytí.

Na dotykových zařízeních se tlačítka, záře a náklon nezapínají (není tam kurzor), nadpis po slovech a pásy fotek fungují.

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í

• Prvky se objeví jednou a pak zůstanou v klidu. Jen několik drobností v úvodu a ve výzvě se jemně vznáší nebo dýchá (odznaky u fotky, tlačítko výzvy), a to jen u Výrazného a Živého stupně.
• Rozbalení otázky v Častých otázkách a v službách s rozbalováním jede plynule v prohlížečích, které to umí; jinde se otázka otevře skokem jako dřív.
• 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.