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:
1 2 3 4 5 6 7 8 9 10 11 12 13 |
jQuery(window).on('scroll',function() { var wh = jQuery(this).height(); jQuery('.tp-parallax-container').each(function() { var layer = jQuery(this); var po = Math.abs(layer.data('parallaxoffset')); if (po>100) po = 100; if (po<20) po =0; po = (100 - po) /100; TweenLite.to(layer,0.2,{opacity:po}); }); }); |
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.