Tutorial to Change Background Color When Scrolling

by Mike Ditka September 2, 2022

Changing the background when scrolling is interesting enough to be applied to web pages, this can attract the attention of website visitors as long as it is used correctly, soft, and uses appropriate colors.

With the help of jquery it is not difficult to implement, just a few lines we can get the effect. One website that has implemented tricks like this is a digital telepathy website.

background scroll animation

Create a New Website Background Animation Change Color
Let’s just make it first from the HTML structure

HTML

One
Two
Three

SCROLL

Lorem ipsum dolor sit amet, elite adipisicing consectetur. …

Section 2

Lorem ipsum dolor sit amet, elite adipisicing consectetur. …

Section 3

Lorem ipsum dolor sit amet, elite adipisicing consectetur. …

There we see that there are IDs #first, #two, #third, all of which are actually not important in making scrolls, they are only used for the purpose of clicking on the menu, but have no effect on the scroll effect, so it doesn’t need to be a concern.

CSS
body{
background-color: yellow;
transition: background-color 0.5s;
-webkit-transition: background-color 0.5s;
margins: 0;
padding: 0;
font-family: Helvetica, arial, sans-serif;
color: #1A2B2A;
overflow-x:hidden;
}
css code snippet
jquery
This is the most important part to create the effect of changing colors when the web page is scrolled.

$(window).scroll(function(){
var y = $(window).scrollTop()
if (y <= 1600){
$(‘body’).css(‘background-color’,’yellow’);
} else if(y <= 3200){
$(‘body’).css(‘background-color’,’orange’);
} else {
$(‘body’).css(‘background-color’,’red’);
}
});
There we use the scroll function, and use the scrollTop() function from jquery to find the page position calculated from the top page of 0px. There we see that there are numbers 1600 and 3200, that means when our position is 1600 px from above the background will change, as well as when it reaches 3200px then the background changes again, if you still want it, just specify at what number it will change color.

DEMO | Download Script
Hopefully this tutorial can be useful for you, making the website you are building more interesting. Keep in mind this is just the basics, you can use tricks for more serious websites. One website that has implemented tricks like this is a digital telepathy website.

Greetings Indonesian web design