Slider Revolution WP
09.27.2016
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.
