--- site_name: WPlama site_description: "Správa, opravy a vývoj WordPress webů a e-shopů" site_url: https://www.wplama.cz contact_email: info@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] --- Divi šablona a Elegant Themes # Divi 4.3: Efekty při posunu (Scroll Effects) [![profil 100x100](https://www.wplama.cz/wp-content/uploads/2026/11/profil-100x100.jpg "profil 100x100") **Tomáš Cirkl**](https://www.wplama.cz/author/tomas/) Publikováno 17. 2. 2020 3 min čtení Pozor: Článek je z roku 2020. Některé postupy se mohly změnit. ![screenshot elegantthemesexamples.com 2020.02](https://www.wplama.cz/wp-content/uploads/2020/02/screenshot-elegantthemesexamples.com-2020.02.png "screenshot elegantthemesexamples.com 2020.02") Obsah článku (4 kapitoly) 1. [Co jsou to Scroll Effects?](https://www.wplama.cz/divi-4-3-efekty-pri-posunu-scroll-effects/#co-jsou-to-scroll-effects) 2. [Šest unikátních efektů, které můžete použít](https://www.wplama.cz/divi-4-3-efekty-pri-posunu-scroll-effects/#sest-unikatnich-efektu-ktere-muzete-pouzit) 3. [Jednoduché nastavení pomocí nového rozhraní](https://www.wplama.cz/divi-4-3-efekty-pri-posunu-scroll-effects/#jednoduche-nastaveni-pomoci-noveho-rozhrani) 4. [Demo nového nastavení](https://www.wplama.cz/divi-4-3-efekty-pri-posunu-scroll-effects/#demo-noveho-nastaveni) 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!](about:blank) ## 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). - [#animace](https://www.wplama.cz/stitek/animace/) - [#Divi](https://www.wplama.cz/stitek/divi/) - [#visual builder](https://www.wplama.cz/stitek/visual-builder/) Sdílet - - [](mailto:?subject=Divi 4.3: Efekty při posunu (Scroll Effects)&body=Divi 4.3: Efekty při posunu (Scroll Effects) https://www.wplama.cz/divi-4-3-efekty-pri-posunu-scroll-effects/) - [](https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fwww.wplama.cz%2Fdivi-4-3-efekty-pri-posunu-scroll-effects%2F) - [](https://www.linkedin.com/sharing/share-offsite/?url=https%3A%2F%2Fwww.wplama.cz%2Fdivi-4-3-efekty-pri-posunu-scroll-effects%2F) ![profil 150x150](https://www.wplama.cz/wp-content/uploads/2026/11/profil-150x150.jpg "profil 150x150") Autor Tomáš Cirkl Zakladatel WPlama. Od roku 2014 se starám o weby a e‑shopy na WordPressu a píšu o tom, co při té práci řeším. Třikrát jsem přednášel na Word Campech. 1 035 článků [Všechny články autora →](https://www.wplama.cz/author/tomas/) ## Komentáře Zatím tu nikdo nekomentoval. Napište první komentář. ### Přidat komentář [Zrušit odpověď](https://www.wplama.cz/divi-4-3-efekty-pri-posunu-scroll-effects/#respond) [← Předchozí článek Co jsou to akce (háčky nebo hooky) ve WordPress?](https://www.wplama.cz/akce/) [Další článek → Co jsou to přílohy ve WordPress?](https://www.wplama.cz/co-jsou-to-prilohy-ve-wordpress/) Související ## Mohlo by vás zajímat [Všechny články z rubriky Divi šablona a Elegant Themes →](https://www.wplama.cz/wordpress/divi-elegant-themes/) ![kombinovatelne nastaveni](https://www.wplama.cz/wp-content/uploads/2026/04/kombinovatelne-nastaveni.png "kombinovatelne nastaveni") Divi šablona a Elegant Themes ### [Divi 5: Kombinovatelné nastavení](https://www.wplama.cz/divi-5-kombinovatelne-nastaveni/) 13. 4. 2026 2 min čtení --- ![command center](https://www.wplama.cz/wp-content/uploads/2026/03/command-center.png "command center") Divi šablona a Elegant Themes ### [Divi 5: Command Center](https://www.wplama.cz/divi-5-command-center/) 7. 4. 2026 4 min čtení --- ![spekulativni prerendering](https://www.wplama.cz/wp-content/uploads/2026/03/spekulativni-prerendering.png "spekulativni prerendering") Divi šablona a Elegant Themes ### [Divi 5: Spekulativní prerendering](https://www.wplama.cz/divi-5-spekulativni-prerendering/) 30. 3. 2026 3 min čtení ---