javascript - fade in and out divs in relation to window position -
i'm trying fadein <div>s class .cms , .seo when entering section id "services" , fadeout when passing section or before.
i want animate in relation scrolling position if possible.
i give link can check site self.
for animations using animate.css
the javascript code inside js/agency.js
this code i've been trying with..
$(window).scroll(function() { var y=$(window).scrolltop(); if (y < 1092){ $('.cms,.seo').addclass('animated fadeoutright'); } if (y > 1092 && y < 1300) { $('.cms,.seo').addclass('animated fadeinright'); } if (y > 1300){ $('.cms,.seo').addclass('animated fadeoutright'); } }); i want know if work on different window sizes or have change code ?
thanks!!
it fades out because if (y < 1092) true scroll.
you want fadeoutright if fadeinright exists on element, way won't hide right away, so:
if (y < 1092 && $('.cms,.seo').hasclass('fadeinright'))
furthermore, since class animated specifies how element animated, apply right away element instead of appending javascript.
see working example on fiddle: https://jsfiddle.net/pjh6gy7e/
it should work on window sizes unless change height of elements responsively.
Comments
Post a Comment