Docs

[yhshin1020]

Hey,

I am trying to recreate the effect here: http://www.dtelepathy.com/work/

Where when you scroll down the opacity of the text decreases and it moves down under the slider and when you scroll up it moves back up.

So far i have created the opacity part:

$(window).scroll(function() {    
     var scroll = $(window).scrollTop();
     $('.fadeouttext').css({'opacity':(( 1000-scroll*3 )/1000)});
 });

I have given the text in my rev slider class fadeouttext and have applied the code above in Customiser, which, applied to my rev slider, works perfectly: it decreases in opacity when you scroll down.

I just need to get the moving part done: i am thinking this is done through margin-top: or top: css, i just cant seem to get it working properly (moving down as user scrolls part).

Any help is appreciated.

I understand if this is outside your scope of support, just thought i might try 🙂

Thanks.

[yhshin1020]

This reply has been marked as private.

[Rue Nel]

Hello There,

Thanks for writing in and the very detailed information. To resolve your issue, you need to move the y location of the element by using a css 2D translation. From the original location of transform: translate(0px, 0%); to the calculated y location like transform: translate(0px, 50%);. Perhaps something like this:

$(window).scroll(function() {    
     var scroll = $(window).scrollTop();
     $('.fadeouttext').css({'opacity':(( 1000-scroll*3 )/1000), 'transform' : translate(0px, (your calculation here) );});
 });

As this is all custom development, regretfully we won’t be able to assist further. Custom development is outside the scope of our support. We’re happy to provide advice and get you started in the right direction, but you would still be responsible for the implementation.

Hope this helps.

[Author]

Posts