Animate Changing Backgrounds

I´m working on a project for college and I´m trying to imitate a effect on this page: https://u.gg/ for my homepage, I managed to change the backgrounds but now I´m trying to ad

Solution 1:

functionnextBackground() {
  header.animate({opacity: 0}, 0);
    current++;
    current = current % backgrounds.length;

    header.css('background-image', backgrounds[current]).animate({opacity: 1}, 'slow')

}


setInterval(nextBackground, 3000);

header.css('background-image',backgrounds[0]).animate({opacity: 1}, 'slow')

JQuery animate

header.animate({opacity: 1}, 'slow')

The opacity value may need to be reset before you run it

header.animate({opacity: 0}, 0);

Solution 2:

I always use this classes for animate things in my projects:

In a css file:

.animated {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

.fast {
    -webkit-animation-duration: 0.4s;
    animation-duration: 0.4s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

.fadeIn {
    animation-name: fadeIn;
}

Then use for example

<divclass="animated fadeIn"><span> Hello </hello></div>

And you can use class fast to do the fadeIn fast.

<divclass="animated fadeIn fast"><span> Hello </hello></div>