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.
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.
$(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) );
});
});
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.
Hi, I'm Vincy. I help build websites, grow businesses, big and small. If that is what you want, contact me.
I'm currently available for freelance work.