jQuery on Scroll Background Animation

by Vincy. Last modified on July 12th, 2022.

In this tutorial, we are going to see how to create background color animation on page scroll. In the 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.

View DemoDownload

HTML DIV to Apply Background Animation

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

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

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.

	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) );		

View DemoDownload

Written by Vincy, a web developer with 15+ years of experience and a Masters degree in Computer Science. She specializes in building modern, lightweight websites using PHP, JavaScript, React, and related technologies. Phppot helps you in mastering web development through over a decade of publishing quality tutorials.

↑ Back to Top

Share this page