Bonsoir, je viens demander votre aide parce que je fais face à un problème en js, alors voilà mon site possède une image de fond (intégrée dans le css avec background-image) et lorsque le l'utilisateur scroll sur le site l'image de fond change, sauf que le problème c'est qu'elle change brusquement, j'aimerais donc savoir si c'est possible de faire en sorte que lorsque l'on scroll, les images changent mais avec un effet d'animation ? Quelque chose de simple genre un fondu, changement d'opacité... Merci d'avance!

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
$(window).scroll(function () {
    var img;
    var bodyHeight = parseInt($('body').css('height')) / 8;
 
    if ($(window).scrollTop() < bodyHeight * 0.7) {
        img = 'img1.png';
    } else if ($(window).scrollTop() < bodyHeight * 1.3) {
        img = 'img2.png';
    } else if ($(window).scrollTop() < bodyHeight * 2.3) {
        img = 'img3.png';
    } else if ($(window).scrollTop() < bodyHeight * 3.3) {
        img = 'img4.png';
    } else if ($(window).scrollTop() < bodyHeight * 4.3) {
        img = 'img5.png';
    } else if ($(window).scrollTop() < bodyHeight * 5.3) {
        img = 'img6.png';
    } else if ($(window).scrollTop() < bodyHeight * 6.3) {
        img = 'img7.png';
    } else if ($(window).scrollTop() <= bodyHeight * 8) {
        img = 'img8.png';
    }
 
    $("body").css("background-image", "url(img/fond-perso/" + img + ")");
 
});