javascript - How reverse animations made with scrollTop(); -
javascript - How reverse animations made with scrollTop(); -
function firstanimation() { $('.etc(1)').fadein(); } function secondanimation() { $('.etc(1)').fadeout(); $('.etc(2)').fadein(); } function thirdanimation() { $('.etc(2)').fadeout(); $('.etc(3)').fadein(); } function fourthanimation() { $('.etc(3)').fadeout(); $('.etc(4)').fadein(); } $(window).scroll(function() { if ($(this).scrolltop() > 150) { firstanimation(); } if ($(this).scrolltop() > 300) { secondanimation(); } if ($(this).scrolltop() > 450) { thirdanimation(); } if ($(this).scrolltop() > 600) { fourthanimation(); } });
guys, i'm using scrolltop() animate piece of site, , wondering if can reverse animation if o scroll bottom, , not top.
i searching there isn't scrollbottom in jquery.
first, set additional requirement each if
statement status each event scroll range prevent multiple events beingness triggered. second, add together .fadeout()
function next elements effect reversed when user scrolls opposite direction.
the code should like:
function firstanimation() { $('.etc1').fadein(); $('.etc2').fadeout(); } function secondanimation() { $('.etc1').fadeout(); $('.etc2').fadein(); $('.etc3').fadeout(); } function thirdanimation() { $('.etc2').fadeout(); $('.etc3').fadein(); $('.etc4').fadeout(); } function fourthanimation() { $('.etc3').fadeout(); $('.etc4').fadein(); } $(window).scroll(function() { if ($(this).scrolltop() > 1500 && $(this).scrolltop() < 3000) { firstanimation(); } if ($(this).scrolltop() > 3000 && $(this).scrolltop() < 4500) { secondanimation(); } if ($(this).scrolltop() > 4500 && $(this).scrolltop() < 6000) { thirdanimation(); } if ($(this).scrolltop() > 6000) { fourthanimation(); } });
demo on jsfiddle
javascript jquery html css
Comments
Post a Comment