Animácie upriamujú pozornosť návštevníka na podstatné elementy stránky a reagujú na jeho akcie, aby potvrdili, že sa pracuje na odpovedi. Príkladom je indikácia načítavania, načítanie ďalších produktov alebo zmena nákupného košíka. Vďaka animácii návštevník vie, že môže očakávať výsledok v dohľadnej dobe.
Ďalšie animácie v šablóne Barcelona sú animácie na prechod myšou nad element (odkaz, produkt, tlačítko) a animácie elementov pri posune po stránke, tzv. scrollovaní. Poďme si ich bližšie predstaviť.
Animácie na prechod myšou #
Odkaz #
Odkazy sú hlavný spôsob navigácie po webových stránkach. Animácia po prechode myšou nad odkazom sa aplikuje na základné odkazy, ale aj na menu. Na prechod myšou sa zobrazí podčiarknutie odkazu.
Typ animácie, teda spôsob zobrazenia tohto podčiarknutia môžete upraviť v Design > Nastavenia šablóny, v bode "Zvýraznenie odkazu po prechode myšou". Možnosti sú animovať zobrazenie podčiarknutia zľava doprava alebo opačne a podobne po odchode myši. Tiež je možnosť animovať podčiarknutie zo stredu a po odchode myši do stredu. Posledná možnosť je animáciu vypnúť, v tom prípade sa podčiarknutie odkazu jednoducho objaví celé naraz.
Produkty#
Produkty sa po prechode myšou v šablóne Barcelona animujú malým zväčšením, zobrazením tieňa vo farbe akcentu a rámčeka.
Typ animácie si môžete zvoliť v Design > Nastavenia šablóny, v bode "Zvýraznenie produktu na prechod myšou". Prvé tri možnosti animujú rámček okolo produktu, potom je možné rámček zobraziť bez animácie alebo ho nezobraziť vôbec.
Tlačidlá #
Tlačidlám sa na prechod myšou zmení pozadie, v závislosti od tmavého / svetlého režimu sa farba pozadia tlačidla buď zosvetlí alebo stmaví. Intenzitu tejto zmeny môžete nastaviť v Design > Nastavenia šablóny, v bode "Intenzita zvýraznenia tlačidiel na prechod myšou a ďalších elementov". Predvolené je jemná zmena 12%, no dajú sa zvoliť aj silnejšie zmeny 25% a 40%. Táto hodnota sa používa aj na iných miestach v šablóne Barcelona pri stmavovaní / zosvetľovaní farby pozadia elementov.
Animácie pri scrollovaní #
Obľúbeným typom animácie je aj animovať "príchod" elementu do stránky pri posune stránky, teda keď návštevník prvýkrát uvidí element. Dá sa to aj rozšíriť a animovať elementy nielen prvýkrát, ale pri viacnásobných posunoch hore a dole vždy, keď element príde na obrazovku.
V šablóne Barcelona sa takto animujú niektoré bloky a produktové anotácie v produktových blokoch a stránkach kategórií. Animácia produktov je odlišná od animácie blokov, aby návštevník vedel podvedome odlíšiť typ obsahu, na ktorý sa stránka posunula. V blokoch sa elementy môžu animovať osobitne a tiež osobitným spôsobom: napr. v bloku Text s nadpisom a zadaným obrázkom v rozložení vpravo sa Nadpis a Text animuju zľava, Obrázok sprava. Text sa pritom začne animovať o trochu neskôr. Blok Text v inom rozložení sa môže animovať iným spôsobom.
Spôsob, ako sa konkrétny blok animuje pri scrollovaní nenastavujete, je daný pevne. Ak máte konkrétne požiadavky na zmeny alebo doplnenie správania, kontaktuje nás.
Vypnutie animácií #
Vypnúť animácie pri scrollovaní môžete v sekcii Design > Nastavenia šablóny, v bode "Vypnúť animácie pri posune (scrollovaní) stránky". Alebo môžete zapnúť animovanie elementov, keď sa návštevník pohybuje po stránke hore a naspäť dole.
Okrem toho, môžete vypnúť animovanie elementov v rámci stránky, bloku alebo kategórie produktov tak, že im nastavíte triedu scrollAnimOff.
Táto trieda je nastavená aj pre pätičku ako celok, aby sa elementy neanimovali v rámci nej.