How can I make the color change smoothly when I scroll the page?

Question

css

Hello, please help.
How to achieve this color effect? calculit.piratesdeaudouce.com
I want the color to change smoothly when I scroll the page.
Thanks in advance.

Answer 1

The Jquery color animate library is used, according to the debugger.
Here are more details:
https://jqueryui.com/animate/
Z. Learn to use the browser debugger, many questions will disappear by themselves.

Answer 2

Here is their code

var tabBgColor = ['#f13640', '#0096c8', '#89b600', '#9f5200', '#f6a11c', '#a539b5'];

  $(window).scroll(function () { 
    colorOnScroll();
  });
  colorOnScroll();

  function colorOnScroll(){
    var scrollTopValue = $(window).scrollTop();
    var tabSectionOffsetTop = [];
    $.each($(".filet"),function(k,v){
      var sectionOffsetTop = $(this).offset().top + ($(this).height() / 2);
      tabSectionOffsetTop.push(sectionOffsetTop);
    });
    if(scrollTopValue<tabSectionOffsetTop[0]){
      $('body').stop().animate({ backgroundColor: tabBgColor[0] });
    }else{
      for(var i=0; i<tabSectionOffsetTop.length;i++){
        if(scrollTopValue>tabSectionOffsetTop[i] && scrollTopValue<tabSectionOffsetTop[i+1]){
          $('body').stop().animate({ backgroundColor: tabBgColor[i+1] });
        }
      }
    }
  }

Answer 3

the most kosher option, it seems to me, is to bind the color to the value of scrollTop
in your example, we got to the point - they changed
it, but it would be better to change it smoothly as you scroll. and the faster the scroll, the faster the changes. I think it can be done