Parallax woes

[Drongo_III]

Hello

 

I am trying to create a script that will animate the sizes of images based on the user scrolling up or down the page. 

 

My intention was to use the scroll values to increase and decrease the size of an image based on the scroll value. So if the user is going down then increase the size and if the user is scrolling up then decrease the image size.

 

I've been trying to code below but the issue is that the scroll event seems to fire inconsistently.  Scrolling down might fire 15 'down' events, but then scrolling up only triggers 7 'up' events. So when I apply this to an image the image ultimately grows and never shrinks back to it's original size.

 

Hopefully someone can point me in the right direction or suggest a better method.

		$(document).ready(function(){
			
			var start = 0;
			
			$(window).scroll(function() {
				var st = $(this).scrollTop();
				clearTimeout(timeout);
				
				var timeout = setTimeout(function(){
				
					if(st < start){
						console.log('DOWN');
					}
					else {
						console.log('UP');			
					}			
			
				}, 100);			
			
			start =$(this).scrollTop();
		});
			
	});