Nově v Divi: Pokročilé nastavení animací pro všechny moduly, řádky i sekce

Každému modulu, řádce nebo sekci v Divi šabloně lze nově přiřadit pokročilou animaci. Díky tomu můžete zajímavou cestou zaujmout návštěvníky stránky.

Nastavení animací bylo v Divi zcela předěláno a bylo pro něj vytvořeno nové rozhraní, které opět pracuje s ikonami a posuvníky a je velmi jednoduché a uživatelsky přívětivé.

V tomto článku se podíváme jak animace prvků funguje a jak s ní pracovat.

Kombinování animací pro tvorbu zajímavých efektů

Protože všechny prvky Divi Builderu nyní obsahují možnost animace, lze kombinovat styly animací tak, že vytvoříte jedinečné sekvence. Využívá se k tomu časový posun animace.

Níže je ukázka animací, kterých lze v Divi dosáhnout.

Divi ukázka animace prvku 1

Divi ukázka animace prvku 2

Divi ukázka animace prvku 3

Divi ukázka animace prvku 4

Divi ukázka animace prvku 5

Divi ukázka animace prvku 6

Divi ukázka animace prvku 7

Divi ukázka animace prvku 8

Divi ukázka animace prvku 9

Divi ukázka animace prvku 10

Všechny výše uvedené animace si můžete prohlédnout v demu 1 a demu 2 na oficiálních stránkách.

Sedm druhů animace

Nový systém animace obsahuje sedm různých stylů animace. Mezi ně patří Prolnutí, Příjezd, Skočení, Přiblížení, Přeložení a Přetočení. Každá animace vytváří unikátní efekt, který lze použít na všechny typy obsahu a veškeré další nastavení animace je také upravitelné pomocí dalšího nastavení. Animaci tak můžete udělat rychlou, pomalou, upravit její načasování a prodlevu nebo třeba změnit její směr.

Ukázka animací

Prolnutí

Příjezd

Skočení

Přiblížení

Přeložení

Přetočení

Pokročilé nastavení pro každý druh animace

Animace lze podobně upravovat pomocí jejich ovládacích prvků a nastavení. Díky tomu lze docílit unikátních efektů zobrazení.

Jedna z unikátních nastavení v Divi je možnost intenzity pro animaci Příjezd. Tato možnost umožňuje rychlé transformování animace z jemné a rychlou. Toto nastavení lze skvěle uplatnit například v modulu Posuvníku.

Celkem je pro animace až sedm dalších možností, jak upravit její průběh.

Nastavení animací v Divi

Animation Repeat (Opakování animace) – ve výchozím nastavení je zadáno, že animace proběhne pouze jednou. Nicméně lze upravit, aby probíhala dokola (vhodné například pro akční tlačítka).
Animation Direction (Směr animace) – každá animace může mít nastavený jiný směr. Můžete animovat ze shora dolů, zespodu nahoru, zleva doprava a zprava doleva.
Animation Duration (Doba animace) – ve výchozím nastavení je průběh animace nastaven na 1s. Lze si to však upravit a animaci urychlit nebo zpomalit.
Animation Delay (Zpoždění animace) – animace se obvykle spouští, když se daný prvek objeví v prohlížeči při posunu stránkou dolů. Nastavením zpoždění animace prodloužíte dobu, kdy animace proběhne po jejím zobrazení na obrazovce.
Animation Intensity (Intenzita animace) – nastavuje pohyb animace. Můžete s ní jednoduše udělat například agresivní nebo jemný slider.
Animation Starting Opacity (Výchozí nastavení průhlednosti) – výchozí nastavení je 0 (maximální průhlednost). Průhlednost jde upravit dle potřeby nebo ji zcela vypnout.
Animation Speed Curve (Rychlostní křivka animace) – upravením rychlostní křivky animace upravíte výchozí styl animace a jejich průběh.