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 el = document.getElementById('lights-out');
// const el2 = document.getElementById('close');
const hooHoo = document.getElementById('hoo-hoo');
const body = document.body;
const article = document.querySelector('article');
let tick = false;
function lightsOut() {
const rect = el.getBoundingClientRect();
const start = window.scrollY + rect.y;
const stop = start + rect.height;
/*
const rect2 = el2.getBoundingClientRect();
const start2 = window.scrollY + rect2.y;
const stop2 = start2 + rect2.height;
*/
const y = window.scrollY + window.innerHeight;
let prog;
if (y < start) {
prog = 0;
} else if (y > stop) {
/*
if (y < start2) {
prog = 1;
} else if (y > stop2) {
prog = 0;
} else {
prog = 1 - (y - start2) / rect2.height;
}
*/
prog = 1;
} else {
prog = (y - start) / rect.height;
}
interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(0, 0, 0)'));
interpolateStyle(article, 'background-color', itpColor(prog, 'rgb(30, 30, 30)'));
interpolateStyle(article, 'color', itpColor(prog, 'rgb(255, 255, 255)'));
for (const chat of article.querySelectorAll('.chat')) {
if (chat === hooHoo) {
continue;
}
interpolateStyle(chat, 'background-color', itpColor(prog, 'rgb(200, 200, 200)'));
interpolateStyle(chat, 'border-color', itpColor(prog, 'rgb(255, 255, 255)'));
}
interpolateStyle(hooHoo, 'background-color', itpColor(prog, 'rgb(20, 20, 20)'));
}
window.addEventListener('scroll', event => {
if (!tick) {
requestAnimationFrame(() => {
lightsOut();
tick = false;
});
tick = true;
}
});
|
