Smooth transition of background-color-CodePudding

I have a problem with the color transition on my site.

Basically, I want to transition from a black background-color to white but I want it to go like on this site https://bullmade.dk/ - smooth (check the inspect when you scroll or the video below). https://streamable.com/w3uso2

I tried it like this but it doesn't work smoothly on mobile...

body {
  background-color:rgba(0,0,0);
  -webkit-transition: background-color .3s linear;
    -ms-transition: background-color .3s linear;
    transition: background-color .3s linear;
  will-change: background-color;
}

I really appreciate any help you can provide.

CodePudding user response：

Here is my code, but it's not working smoothly like on the example it just changes from black to white not step by step and I get some lag on mobile.

I got elementor sections with data-color attribute I use CSS body and JS to make the transition based on scroll position.

jQuery(document).ready(function( jQuery ) {
    jQuery(window).on('scroll touchmove', function() {

        if (jQuery(document).scrollTop() >= jQuery('#one').position().top) {
            jQuery('body').css('background-color', jQuery('#one').attr('data-color'));
        }

        if (jQuery(document).scrollTop() > jQuery('#two').position().top-50) {
            jQuery('body').css('background-color', jQuery('#two').attr('data-color'));
        }

    });
})

body {
  background-color:rgb(0,0,0);
  -webkit-transition: background-color .3s linear;
    -ms-transition: background-color .3s linear;
    transition: background-color .3s linear;
  will-change: background-color;
}
h1
{
font-family:'Arial', sans-serif;
font-weight:800;
font-size:35px;
}
section
{
  height:100vh;
  color:#fff;
  margin: auto;
  width:100%;
  text-align:center;
}
section h1
{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
#two h1
{
color:#000;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<section id="one" data-color="rgb(0,0,0)">
<h1>Example</h1>
</section>
<section id="two" data-color="rgb(255,255,255)">
<h1>Example</h1>
</section>

CodePudding user response：

Something like this maybe?

body {
  background-color: rgba(0,0,0);
  animation: backgroundFade .3s;
}

@keyframes backgroundFade {
  0%   {background-color: rgba(255,255,255);}
  100%   {background-color: rgba(0,0,0);}
}

<body></body>