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
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
|
const el1 = document.getElementById('encircle');
const el2 = document.getElementById('entrap');
const el3 = document.getElementById('encroach');
const el4 = document.getElementById('entomb');
const el5 = document.getElementById('enclose');
const elW1 = document.getElementById('white1');
const elW2 = document.getElementById('white2');
const elG1 = document.getElementById('gray1');
const elG2 = document.getElementById('gray2');
const body = document.body;
const article = document.querySelector('article');
let tick = false;
function enflame() {
const rect1 = el1.getBoundingClientRect();
const rect2 = el2.getBoundingClientRect();
const rect3 = el3.getBoundingClientRect();
const rect4 = el4.getBoundingClientRect();
const rect5 = el5.getBoundingClientRect();
const rectW1 = elW1.getBoundingClientRect();
const rectW2 = elW2.getBoundingClientRect();
const rectG1 = elG1.getBoundingClientRect();
const rectG2 = elG2.getBoundingClientRect();
const start1 = window.scrollY + rect1.y;
const stop1 = window.scrollY + rect2.y + rect2.height;
const start2 = window.scrollY + rect3.y;
const stop2 = window.scrollY + rect4.y + rect4.height;
const start3 = window.scrollY + rect5.y;
const stop3 = window.scrollY + rect5.y + rect5.height;
const startW = window.scrollY + rectW1.y;
const stopW = window.scrollY + rectW2.y + rectW2.height;
const startG = window.scrollY + rectG1.y;
const stopG = window.scrollY + rectG2.y + rectG2.height;
const y = window.scrollY + window.innerHeight;
let step;
let prog;
if (y < start1) {
step = 1;
prog = 0;
} else if (y > stop1) {
if (y < start2) {
step = 1;
prog = 1;
} else if (y > stop2) {
if (y < start3) {
step = 2;
prog = 1;
} else if (y > stop3) {
if (y < startW) {
step = 3;
prog = 1;
} else if (y > stopW) {
if (y < startG) {
step = 'W';
prog = 1;
} else if (y > stopG) {
step = 'G';
prog = 1;
} else {
step = 'G';
prog = (y - startG) / (stopG - startG);
}
} else {
step = 'W';
prog = (y - startW) / (stopW - startW);
}
} else {
step = 3;
prog = (y - start3) / (stop3 - start3);
}
} else {
step = 2;
prog = (y - start2) / (stop2 - start2);
}
} else {
step = 1;
prog = (y - start1) / (stop1 - start1);
}
if (step === 1) {
interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(120, 104, 74)'));
} else if (step === 2) {
interpolateStyle(body, 'background-color', itpColor(1, 'rgb(120, 104, 74)'));
interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(70, 34, 14)'), false);
} else if (step === 3) {
interpolateStyle(body, 'background-color', itpColor(1, 'rgb(70, 34, 14)'));
interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(83, 83, 83)'), false);
} else if (step === 'W') {
interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(255, 255, 255)'));
} else if (step === 'G') {
interpolateStyle(body, 'background-color', itpColor(1, 'rgb(255, 255, 255)'));
interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(83, 83, 83)'), false);
}
// interpolateStyle(article, 'background-color', itpColor(prog, 'rgb(30, 30, 30)'));
// interpolateStyle(article, 'color', itpColor(prog, 'rgb(255, 255, 255)'));
}
window.addEventListener('scroll', event => {
if (!tick) {
requestAnimationFrame(() => {
enflame();
tick = false;
});
tick = true;
}
});
|
