Fade un changement de background-image sur body

Genki
Javascript

Bonjour,

Je peine avec un petit morceau de code tout bête, mais dont j'arrive pas à me dépatoger.
J'ai un body, simple, pour l'exemple, sans aucun texte, juste un fond blanc. Et le but de mon script et de faire tourner en boucle, différent background image. C'est important que ça soit sur le body, mais si jamais ça pose problème, un div en full width/full height ferait l'affaire aussi

var images = ['image1.jpg', 'image2.jpg', 'image3.jpg'];
var i = 0;

setInterval(function(){
    $('body').css('background-image', function() {
        if (i >= images.length) {
            i=0;
        }
        return 'url("./' + images[i++] + '")'; 
    });
}, 2000); // C'est pour aller plus vite, sinon c'est pas 2s que je mets

J'aimerai juste ajouter un fade en transition de chaque image. Mais j'arrive pas, ça fait longtemps que j'ai pas touché à du code, et j'ai un peu perdu la main

Merci :)

2 réponses

etorion
Réponse acceptée

Bonjour,

je ferai comme ça:

JS :
var images = [
'https://picsum.photos/500/500/?image=0',
'https://picsum.photos/500/500/?image=1', 
'https://picsum.photos/500/500/?image=2'
];

var i = 0;

setInterval(function(){

        if (i >= images.length) {
         i=0;
    }

    $('body').css({
    'background':'url('+images[i] + ') center no-repeat fixed',
    'background-size':'cover'

    });    

    i++;
}, 2000);

CSS:
body{

  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;

}

@+

Genki
Auteur

Ca fonctionne, donc c'est bon pour moi, merci ! :)