jQuery on Scroll Background Animation

In this tutorial we are going to see how to create background color animation on page scroll. In previous article we have seen background image animation.

In this example we are using jQuery animate() function to do background animation effect. We are using an array of background colors to be changed on page scroll to create gradient background animation.

background-color

View DemoDownload

HTML DIV to Apply Background Animation

This DIV element id is specified as a selector to call jQuery animation.

<body>		
    <div id="bg-animate"> </div>
</body>

jQuery Background Animation

This jQuery script is called on page scroll and change the background-color index. The changed index is used to pick the color from the array to change the background=color of the DIV element with gradient animation.

<script>
$(document).ready(function(){
	var i = 0;
	var bgColor = [ "#000099", "#003300", "#FF9900", "#FF3366","#CC66FF"];
	$(window).scroll(function() {clearTimeout( $.data( this, "scrollCheck" ) );
		$.data( this, "scrollCheck", setTimeout(function() {
			$("#bg-animate").animate({backgroundColor: bgColor[i]}, 1500);
			if(i < bgColor.length-1) {
				i = i+1 
			} else {
				i = 0;
			}
		}, 250) );		
	});
});
</script>

View DemoDownload

This jQuery code tutorial was published on January 20, 2015.

↑ Back to Top