--- site_name: WPlama site_description: Internetové stránky na WordPressu snadno a česky site_url: https://www.wplama.cz contact_email: tomas@wplama.cz title: Divi 4.3: Efekty při posunu (Scroll Effects) url: https://www.wplama.cz/divi-4-3-efekty-pri-posunu-scroll-effects/ date: 2020-02-17 modified: 2020-02-16 author: Tomáš Cirkl type: post categories: [Divi šablona a Elegant Themes] tags: [animace, Divi, visual builder] --- ![screenshot elegantthemesexamples.com 2020.02 1024x504](https://www.wplama.cz/wp-content/uploads/2020/02/screenshot-elegantthemesexamples.com-2020.02-1024x504.png "screenshot elegantthemesexamples.com 2020.02 1024x504") # Divi 4.3: Efekty při posunu (Scroll Effects) 17.2.2020 Další z řady aktualizací upravující možnosti nastavení vzhledu stránky v [Divi šabloně](https://www.wplama.cz/divi). 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. [Introducing Divi Scroll Effects. The Ultimate Web Animation Builder!](https://www.youtube.com/embed/VsM2e8SeNaQ?feature=oembed) ## 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. [https://www.wplama.cz/wp-content/uploads/2020/02/fruit.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/fruit.mp4) ## Š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. [https://www.wplama.cz/wp-content/uploads/2020/02/vertical.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/vertical.mp4) ### 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. [https://www.wplama.cz/wp-content/uploads/2020/02/horizontal.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/horizontal.mp4) ### 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í. [https://www.wplama.cz/wp-content/uploads/2020/02/blur.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/blur.mp4) ### 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á. [https://www.wplama.cz/wp-content/uploads/2020/02/fade.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/fade.mp4) ### Škálování (Scale) Škálování umožňuje zvětšit nebo zmenšit jakýkoliv element v Divi. [https://www.wplama.cz/wp-content/uploads/2020/02/scale.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/scale.mp4) ### Otáčení (Rotation) Efekt otáčení umí otočit prvek v závislosti na posunu návštěvníka stránkou. [https://www.wplama.cz/wp-content/uploads/2020/02/rotate.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/rotate.mp4) ## 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. [https://www.wplama.cz/wp-content/uploads/2020/02/simple.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/simple.mp4) ### 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. [https://www.wplama.cz/wp-content/uploads/2020/02/timeline.mp4](https://www.wplama.cz/wp-content/uploads/2020/02/timeline.mp4) 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](https://www.wplama.cz/scroll-efects). ### Správa WordPress webu Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními. [Více informací](https://www.wplama.cz/sprava-wordpress-webu/) ### O autorovi ![579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892](https://secure.gravatar.com/avatar/579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892?s=100&d=monsterid&r=g "579c70f93c868ab0086f8d13a2143605f2e29b7a7ba30c5e7a4d1163a5b37892") [#### Tomáš Cirkl](https://www.wplama.cz/author/tomas/) Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na Word Camp Praha a WordPress konferencích. ## Mohlo by vás také zajímat [![Bloom vzhled formuláře](https://www.wplama.cz/wp-content/uploads/2015/03/bloom-vzhled-formulare-1024x514.png "Bloom vzhled formuláře")](https://www.wplama.cz/optinmonster-vs-bloom/) ### [Velké porovnání pluginů pro sběr emailů: OptinMonster vs. Bloom](https://www.wplama.cz/optinmonster-vs-bloom/) [Divi šablona a Elegant Themes](https://www.wplama.cz/wordpress/divi-elegant-themes/), [WordPress obecně](https://www.wplama.cz/wordpress/obecne/)[![elegant themes](https://www.wplama.cz/wp-content/uploads/2015/06/elegant-themes.jpg "elegant themes")](https://www.wplama.cz/wordpressovy-specialista-elegant-themes/) ### [WordPressový specialista Elegant Themes](https://www.wplama.cz/wordpressovy-specialista-elegant-themes/) [Divi šablona a Elegant Themes](https://www.wplama.cz/wordpress/divi-elegant-themes/), [WordPress obecně](https://www.wplama.cz/wordpress/obecne/)[![elegant themes](https://www.wplama.cz/wp-content/uploads/2015/06/elegant-themes.jpg "elegant themes")](https://www.wplama.cz/sablony-elegant-themes-cestina-zdarma/) ### [Všechny šablony od Elegant Themes česky? A zdarma?!](https://www.wplama.cz/sablony-elegant-themes-cestina-zdarma/) [Divi šablona a Elegant Themes](https://www.wplama.cz/wordpress/divi-elegant-themes/), [Ostatní](https://www.wplama.cz/wordpress/ostatni/) ### Diskuze [Zruš odpověď](https://www.wplama.cz/divi-4-3-efekty-pri-posunu-scroll-effects/?_tmcb=1772964096#respond)