Animation image fond

**Redelta** · 29/04/2020, 19h07

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 + ")");
 
});

**dominos** · 30/04/2020, 08h32

Salut, avec jquery c'est plus simple : https://www.w3schools.com/jquery/jquery_fade.asp

Invité · 30/04/2020, 08h46

@dominos
C'est déjà du jQuery...

Nom : homer.png
Affichages : 561
Taille : 8,3 Ko

Par contre, ici, le fait de changer simplement l'URL fait qu'effectivement, on a un changement brusque de l'image.
Pour créer des transitions, il faudrait qu'on ait 2 fonds (pour 2 images), ou autant que d'images.

**Redelta** · 30/04/2020, 10h48

Envoyé par jreaux62

Par contre, ici, le fait de changer simplement l'URL fait qu'effectivement, on a un changement brusque de l'image.
Pour créer des transitions, il faudrait qu'on ait 2 fonds (pour 2 images), ou autant que d'images.

Comment ça il faudrait qu'on ai 2 fond ? Il faut que je fasse 8 images de fond différentes ? Si c'est ça alors justement je l'ai déjà fais.
Ou il faut mettre 8 fois le "background-image:" ?

Je me suis dis que peut être de la même manière qu'avec un .toggleClass() je pourrais mettre 8 fois le background-image dans le css et faire en sorte que ça change lorsque l'on scroll, ce qui permettrait d'ajouter un effet d'animation plus facilement ?

**NoSmoking** · 01/05/2020, 21h59

Bonjour,
cette discussion m'a fait penser à une que nous avions tenu il y à près d'un an : Navigateurs Change background, à lire concernant des soucis inhérents à l'utilisation des images en background et pour laquelle j'avais analysé plusieurs solutions dont une se rapprochant du besoin présenté dans cette discussion.

• Concernant la modification au scroll celle-ci ne peut pas se faire uniquement en CSS mais celui-ci est intéressant ne serait ce que pour gérer les modifications.

On peux donc gérer l'affichage via un classique en CSS
A partir de la structure suivante :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
<body>
  <!-- les éléments sont placés en début de code -->
  <input type="radio" name="fond-scroll-radio">
  <div class="fond-scroll"></div>
  <input type="radio" name="fond-scroll-radio">
  <div class="fond-scroll"></div>
  <!-- autant que l'on veut -->
  <header>

et avec le CSS

Code css :

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
.fond-scroll {
  z-index: -1;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  transition: all .5s;
}
[name="fond-scroll-radio"] {
  position: absolute;
  left: -999em;
}
[name="fond-scroll-radio"] + .fond-scroll {
  opacity: 0;
}
[name="fond-scroll-radio"]:checked + .fond-scroll {
  opacity: 1;
}

le cllic sur un quelconque des <input type="radio"> entrainera l'« affichage » de l'élément immédiatement suivant et par conséquence le « masquage » des autres.

• Pour la gestion fonction de la position du scroll il faut passer par le JavaScript et calculer en fonction de la position du document quel fond devrait être visible et à partir de là provoquer un clic sur le <input type="radio"> concerné.

Sans rentrer dans le détail je vous livre directement le code complet de l'exemple que je met en lien, il prend en compte la création dynamique des éléments de fond ce qui n'est pas forcément une obligation.

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
const Fond = {
  imgPath: "https://cyberzoide.developpez.com/misc/",
  imgFond: [
      "background12-1600x1200.jpg",
      "background12b-1600x1200.jpg",
      "background12d-1600x1200.jpg",
      "background12e-1600x1200.jpg",
      "background12h-1600x1200.jpg",
      "background12g-1600x1200.jpg"
    ],
  radioBtn: [],
  create: function () {
    const oBody = document.querySelector("body");
    // inverse pour insertion
    this.imgFond.reverse();
    this.imgFond.forEach((img) => {
      // création des éléments
      const oFond = document.createElement("DIV");
      const oCheck = document.createElement("INPUT");
      oCheck.type = "radio";
      oCheck.name = "fond-scroll-radio";
      oFond.className = "fond-scroll";
      oFond.style.backgroundImage = "url(" + this.imgPath + img + ")";
      // on ajoute dans l'ordre inverse
      oBody.insertBefore(oFond, oBody.firstElementChild);
      oBody.insertBefore(oCheck, oFond);
      // stock réf.
      this.radioBtn.push(oCheck);
    });
    // on remet dans l'ordre
    this.radioBtn.reverse();
    // on check le 1st
    this.radioBtn[0].click();
    // mise en place suivi
    this.setEvent();
  },
  setEvent: function () {
    document.addEventListener("DOMContentLoaded", () => {
      const oHtml = document.querySelector("html");
      // how many fond
      const nbrFond = this.radioBtn.length || 1;
      window.addEventListener("scroll", () => {
        // hauteur scrollable
        const heightScroll = oHtml.scrollHeight - window.innerHeight;
        // actual position of scroll
        const posX = window.pageYOffset;
        const step = heightScroll / nbrFond;
        // attention aux arrondis
        const numFond = Math.min(parseInt(posX / step, 10), nbrFond - 1);
        // click sur radio
        this.radioBtn[numFond].click();
      });
    });
  }
};
Fond.create();

• L'exemple en ligne : Changement d'image de fond au scroll

PS : je ne pensais pas qu'un code de test vieux d'un an puisse resservir !

**Redelta** · 02/05/2020, 19h42

ça marche parfaitement en effet, un grand merci! Je ne savais pas que c'était possible d'utiliser les input de cette manière et encore moins de les manipuler avec le js ahah!

Je passe le topic en résolu! Bonne journée à vous!

**Redelta** · 30/04/2020, 10h40

Envoyé par dominos

Salut, avec jquery c'est plus simple : https://www.w3schools.com/jquery/jquery_fade.asp

ça m'a l'air d'être une bonne idée en effet mais je ne comprend pas comment l'intégrer,

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$("body").css("background-image", "url(img/fond-perso/" + img + ")");

c'est la ligne qui fait le changement de background, puisque je met déjà le .css("background-image....) je ne peux pas y implémanter un .fadeOut(); non ?

Animation image fond

jQuery

Vue hybride

Discussions similaires

Partager

Partager