Based on that codepen, I managed to make the button bounce when the user scroll up and down.
But, how to make the button bounce if the user scroll up/down twice in a row? Basically what I’m trying to achieve is to make the button keep bouncing until the user stop scrolling.
And in the JS, apply that class whenever a scroll event occurs, and set a timeout to remove the class again after a given period of time; but also clear that timeout for every new scroll event:
var $bounce = $('.bounce')
var stopBouncing
$(window).scroll(function () {
$bounce.addClass('animated')
window.clearTimeout(stopBouncing)
stopBouncing = window.setTimeout(function () {
$bounce.removeClass('animated')
}, 1000)
})
This way the element will keep bouncing until the user stopped scrolling for 1s.