Fade out Parallax Layers on Scroll

Utilize the “parallaxoffset” jQuery data to fade out layers


To manipulate the Parallax Layers based on their offset positions, we added a data-parallaxoffset attribute which is dynamic updated on scroll.

This Attribute is available on any .tp-parallax-container classified container.

To read and work with this value, you can add some script like shown here in the Slider Settings Custom Javascript window:


The Script calls the function on the Scroll event and read all offset values of Parallax containers. The data-parallaxoffset defines the current position offset based on the parallax depths and scroll position of the Slider. However it is important if the slider embeded top / within or in footer.

You may want to fine tune the animation by settings speed and distance. For that you can modificate the min / max values and or divide / multiple “po” before further calculation.