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(); |
