Parallax Effect

One of the interesting things you can do with ui/Theme-Builder is to listen to scrolling events in order to apply the x or y positions to the section headings or backgrounds and create a beautiful parallax effect.

Properties are always animated from their current value to the target value you set in section or component options. However, you can also define a starting value yourself. To do this, insert two values in the option field and separate them with a comma.

Viewport position

Using the viewport option you can adjust the animation duration. The value defines how far inside the viewport the target element is scrolled until the animation is completed. With the value 1, the animation lasts as long as the element is in the viewport (default behaviour). Setting it to 0.5, for example, animates the property until the scroll position reaches the middle of the target element.