JavaScript smoothly changing page background?

Question

css

Tell me some JavaScript that can smoothly change the background-image for the entire page ( body ) at certain intervals.

Answer 1

I don’t know if it’s still relevant, but here’s a solution:
We make the page an ordinary bootstrap carousel, set the necessary timing for it, and add something like this script. It works according to the following logic: each picture is assigned its own color, accordingly, the background should change animatedly, suitable for exactly the picture that will be displayed.
For clarity, this is how it all looks (carefully, the gif is heavy): goo.gl/ZXCCHh
The following line has been added to the css:
In HTML, each image container has a data-attribute with the required color added:

<div class="item" data-color="red">
    <div>
        <img class=' header__images' src="img/main-page/slides/3.png">
    </div>
</div>

And the script itself:

$("#myCarousel").on('slide.bs.carousel', function (e) {
    var nextItem = $(e.relatedTarget); // считываем следующую картинку _перед_ тем как она появится.

    if($(nextItem).data('color') === 'green') {  // в зависимости от data-атрибута меняем цвет фона 
        $('.main-page').css('background', '#8de257'); 
   } 
    else if($(nextItem).data('color') === 'yellow') { // и далее все слайды по аналогии
        $('.main-page').css('background', '#f8cc00'); 
    } 
    else if ($(nextItem).data('color') === 'red') {
        $('.main-page').css('background', '#ff5a42'); 
    } 
    else if ($(nextItem).data('color') === 'blue'){
        $('.main-page').css('background', '#68d9fa'); 
    };
});

By analogy, you can do what you need.

Answer 2

can you do it in css3