Další z řady aktualizací upravující možnosti nastavení vzhledu stránky v Divi šabloně. Tentokrát se nová nabídka nastavení jmenuje Scroll Effects, což by se dalo volně přeložit jako efekty při posunu po stránce.
V Divi nově můžete jednoduše vytvářet přechodové animace, které reagují na pohyb návštěvníka po stránce. Animovat můžete jakýkoliv prvek ve Visual Builderu a jednotlivé efekty jdou společně kombinovat.
Co jsou to Scroll Effects?
Scroll Effects neboli efekty při posunu po stránce jsou upravitelné animace, které reagují na to, jak se uživatel posouvá po stránce nahoru a dolu. Na rozdíl od klasických animací jsou přímo svázány s pohybem uživatele. Rychlost a směr animace je založena přímo na pohybu návštěvníka. Průběh animace je založen na pozici elementu při zobrazení prohlížeče.
Šest unikátních efektů, které můžete použít
Jakýkoliv element v Divi šabloně lze nově animovat pomocí šesti efektů:
- scale (škálování)
- rotation (otáčení)
- horizontal and vertical motion (horizontální a vertikální pohyb)
- opacity (průhlednost)
- blur (rozmazání)
Všechny efekty lze kombinovat.
Pojďme si jednotlivé efekty postupně představit.
Vertikální pohyb (Vertical Motion)
Pomocí vertikálního pohybu můžete jakýkoliv element posouvat nahoru a dolu. Díky tomu lze docílit paralax efektu.
Horizontální pohyb (Horizontal Motion)
Horizontální pohyb, podobně jako vertikální, umožňuje posun prvku po stránce, v tomto případě doleva a doprava.
Rozmazání (Blur)
Efekt rozmazání zaostří a rozmaže prvek při pohybu uživatele po stránce. Nastavit můžete startovací, prostřední a koncovou hodnotu rozmazání.
Průhlednost (Fade)
S průhledností můžete zobrazovat a skrývat prvky při posunu stránkou. Průhlednost nemusí samozřejmě být 100%, ale jen částečná.
Škálování (Scale)
Škálování umožňuje zvětšit nebo zmenšit jakýkoliv element v Divi.
Otáčení (Rotation)
Efekt otáčení umí otočit prvek v závislosti na posunu návštěvníka stránkou.
Jednoduché nastavení pomocí nového rozhraní
Pro toto nastavení bylo do Divi přidáno nové rozhraní, které umožňuje animace velmi jednoduše použít a nastavit. Najdete jej v okně nastavení prvku, záložce Pokročilé a položce Scroll Efects.
Možnosti nastavení
Když povolíte konkrétní prvek animace, zobrazí se osa průběhu, kde můžete nastavit startovací, prostřední a koncovou hodnotu.
- Startovací hodnota – počáteční hodnota animace, když se prvek objeví na spodní hraně prohlížeče uživatele.
- Prostřední hodnota – hodnota, do které se dostane prvek uprostřed prohlížeče uživatele.
- Koncová hodnota – hodnota, do které se dostane prvek, když zmizí v horní části prohlížeče.
Příklad:
Když při průhlednosti nastavíte startovací hodnotu na 0 (neviditelné), prostřední na 100 (plně viditelné) a koncovou na 0 (neviditelné), tak se prvek postupně objevuje, až je uprostřed prohlížeče plně viditelný a poté opět začne mizet.
Úprava osy
Kromě úpravy samotných hodnot, můžete i upravit, kdy se jednotlivé hodnoty začnou používat. Jejich hodnota se nastavuje v % a počítá se relativní pozice prvku při zobrazení v prohlížeči.
Dále můžete i prostřední hodnotu rozvinout a nastavit ji jako statickou. Bude pak pro ni možné nastavit, kdy se do ni prvek dostane a kdy se z prostřední hodnoty dostane. Nastavení statického stavu aktivujete kliknutím na dvě šipky prostřední ikony při úpravě osy.
Demo nového nastavení
Prohlédnout si nové funkce můžete také na připravené demo stránce.
