How to Change the Background Color With Fade Animation Using Jquery?

If you want to smoothly transition and change background color while scrolling, preferably using just CSS and jquery then you are at right place.

HTML

<body>

    <div data-color="red" class="panel home">
        <div class="logo-zoom animate__animated animate__zoomIn">
     <img src="img/logo-home.svg" alt="Logo Vilson">
 </div>
    </div>
    <div class="featured-wrapper panel" data-color="white">
 <div class="container">
     <div class="row">
         <div class="col-md-12">
      <p>Test is a dummy test. </p>
  </div>
     </div>
        </div>
   </div>

You need to add .panel class and data-color=” ” in main div of every section.

CSS

.color-white{
  background-color: #fff;
}
.color-red{
  background-color: #C1272D;
}

.color-gray{
  background-color: #F4F4F4;
}

You can create the background classes according to your need.

Jquery

$(window).scroll(function() {
  
  // selectors
  var $window = $(window),
      $body = $('body'),
      $panel = $('.panel');
   
  var scroll = $window.scrollTop() + ($window.height() / 2);
 
  $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();

We have tested the above code. You can try it.

Admin: