Im making an animation using spritely.net It gives you a function to start the animation and a function to stop it.
I want the animation to start when someone starts scrolling down the page, and stop when they stop scrolling.
I am able to do this but the problem is .scroll triggers the animation start many times a second which makes the animation go crazy. You can see if you scroll down the page here:
The animation when allowed to run properly should look more like this:
I've tried this plugin
http://benalman.com/projects/jquery-throttle-debounce-plugin/
and also this http://documentcloud.github.io/underscore/#throttle
but haven't been able to get my jquery ready into a nice function that I can pass to it, and make the animation work. Also I've seen that other people have managed curtail .scroll() without using these plugins, but I have not been able to adapt their code to suit my purpose.
This is my jquery which starts and stops the animation - my sensing when user is scrolling.
$(window).scroll( function() {
$('#bird')
.sprite({fps: 1, no_of_frames: 16, rewind: true })
});
$(window).scroll(function() {
clearTimeout($.data(this, 'scrollTimer'));
$.data(this, 'scrollTimer', setTimeout(function() {
$('#bird').spStop()
}, 250));
});
$(window).scroll(function() {
$('#bird').spStart()
});
