Change section background colour with fade animation on scroll

This is another simple css and JavaScript concept to change the each section background color with the fade animation on mouse scroll down. Most of the website having this kind of color changes effect for each sections. 

This is quite simple you need to create different classes for each sections, In that class you need to specify the different types of background colors. The JavaScript code is used to give the background color changes with fade effect. This is one of the simple and very useful concept when you going to implement this types of the concept in the websites. This types of background color with fade effect really attract the customers. 

You can also modify and use the code according to your web requirements, Here i will provide the live demo and the download code you can use it. I hope this concept is really interesting and useful to you. 

Change section background colour with fade animation on scroll

Code to change section background colour with fade animation on scroll:

<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Change Section Background color using javascript with smooth animation</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css">
<style>

body {
color: #000;
background-color: #f4f4f4;
transition: background-color 1s ease;
}

.panel {

min-height: 100vh;
display: flex;
justify-content: space-around;
align-items: center;
font-family: sans-serif;

}

/* colours */
.color-violet {
background-color: #7A4EAB;
}
.color-indigo {
background-color: #4332CF;
}
.color-blue {
background-color: #2F8FED;
}
.color-green {
background-color: #4DCF42;
}
.color-yellow {
background-color: #FAEB33;
}
.color-orange {
background-color: #F19031;
}
.color-red {
background-color: #F2293A;
}

.color-pink {
background-color: #FFC0CB;
}

body {
text-align: center;
font-size: 120%;
line-height: 1.618;
}
h1, h2 {
font-size: 3em;
letter-spacing: -0.05em;
line-height: 1.1;
}
p {
max-width: 30em;
margin-bottom: 1.618em;
}
a {
color: #4332CF;
}
</style>
</head>
<body>
<div class="panel" data-color="pink">
<div>
<h2>Pink panel</h2>
</div>
</div>
<div class="panel" data-color="red">
<h2>Red panel</h2>
</div>
<div class="panel" data-color="orange">
<h2>orange panel</h2>
</div>
<div class="panel" data-color="yellow">
<h2>yellow panel</h2>
</div>
<div class="panel" data-color="green">
<h2>green panel</h2>
</div>
<script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script>
$(window).scroll(function() {

var $window = $(window),
$body = $('body'),
$panel = $('.panel');

var scroll = $window.scrollTop() + ($window.height() / 3);

$panel.each(function () {
var $this = $(this);

if ($this.position().top <= scroll && $this.position().top + $this.height() > scroll) {

$body.removeClass(function (index, css) {
return (css.match (/(^|\s)color-\S+/g) || []).join(' ');
});

$body.addClass('color-' + $(this).data('color'));
}
});    

}).scroll();
</script>
</body>
</html>

Post a comment

0 Comments