Hi everyone,
I’m not a coder but, after some online research, I’ve succeded to set a javascript that let a series of text boxes (ID step2, step3…) to toggle the visibility of a series of hidden associated images (ID frame2, frame 3…) when the text enter the viewport, and to hide the images when they leave.
I would like to set the function so that it works only when the text boxes enter/leave the viewport from the bottom, not from the top.
Any help would be highly appreciated.
Thanks!
Riccardo
$w . onReady ( function () {
let fadeOptions = {
“duration” : 350 , “delay” : 150 , //time in ms
}
$w ( “#step2” ). onViewportEnter (()=>{
$w ( “#frame2” ). show ( “fade” , fadeOptions );
});
$w ( “#step2” ). onViewportLeave (()=>{
$w ( “#frame2” ). hide ( “fade” , fadeOptions );
});
$w ( “#step3” ). onViewportEnter (()=>{
$w ( “#frame3” ). show ( “fade” , fadeOptions );
});
$w ( “#step3” ). onViewportLeave (()=>{
$w ( “#frame3” ). hide ( “fade” , fadeOptions );
$w ( “#step4” ). onViewportEnter (()=>{
$w ( “#frame4” ). show ( “fade” , fadeOptions );
});
$w ( “#step4” ). onViewportLeave (()=>{
$w ( “#frame4” ). hide ( “fade” , fadeOptions );
});
});
});