Divi Toolbox ➜ Extras ➜ Parallax Scrolling for Modules
This feature adds ten different scrolling speeds you can apply to any module to achieve beautiful and smooth parallax scrolling effect. The effect can be applied to any row, section, or – for the best results – any module.
Navigate to module Settings → Advanced tab → CSS ID & Classes → CSS Class, and add the preferred custom class. A negative value makes the element move more slowly than regular scrolling. A positive value makes it scroll more quickly than regular scrolling.
Available classes:
scroll_speed_-10
scroll_speed_-9
scroll_speed_-8
scroll_speed_-7
scroll_speed_-6
scroll_speed_-5
scroll_speed_-4
scroll_speed_-3
scroll_speed_-2
scroll_speed_-1
scroll_speed_1
scroll_speed_2
scroll_speed_3
scroll_speed_4
scroll_speed_5
scroll_speed_6
scroll_speed_7
scroll_speed_8
scroll_speed_9
scroll_speed_10
Please note: Scroll speed -2 (CSS class of scroll_speed_-2) is the default “smooth, relaxed” scroll speed for elements to scroll more slowly than the rest of the page. Use higher values with caution and preferably only for background elements.
For more subtle effect use of of the following classes (scroll speed between 2 and -2)
scroll_speed_-1_8
scroll_speed_-1_6
scroll_speed_-1_4
scroll_speed_-1_2
scroll_speed_-0_8
scroll_speed_-0_6
scroll_speed_-0_4
scroll_speed_-0_2
scroll_speed_0_2
scroll_speed_0_4
scroll_speed_0_6
scroll_speed_0_8
scroll_speed_1_2
scroll_speed_1_4
scroll_speed_1_6
scroll_speed_1_8
You can also disable the effect on mobile and enable “Center in the Viewport” option to keep elements in the center of the page, aligned correctly with others.
See the demo page.
