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
|
const el = document.getElementById('wakey-wakey');
const well = document.getElementById('well');
const body = document.body;
const doc = document.querySelectorAll('article, nav');
let tick = false;
function wakeyWakey() {
const rect = el.getBoundingClientRect();
const start = window.scrollY + rect.y;
const stop = start + rect.height;
const y = window.scrollY;
let prog;
if (y < start) {
prog = 1;
} else if (y > stop) {
prog = 0;
} else {
prog = 1 - (y - start) / rect.height;
}
interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(0, 0, 0)'));
for (const el of doc) {
interpolateStyle(el, 'background-color', itpColor(prog, 'rgb(30, 30, 30)'));
interpolateStyle(el, 'color', itpColor(prog, 'rgb(255, 255, 255)'));
}
for (const chat of body.querySelectorAll('.chat')) {
if (chat === well) {
continue;
}
interpolateStyle(chat, 'background-color', itpColor(prog, 'rgb(200, 200, 200)'));
interpolateStyle(chat, 'border-color', itpColor(prog, 'rgb(255, 255, 255)'));
}
interpolateStyle(well, 'background-color', itpColor(prog, 'rgb(160, 160, 160)'));
}
window.addEventListener('scroll', event => {
if (!tick) {
requestAnimationFrame(() => {
wakeyWakey();
tick = false;
});
tick = true;
}
});
wakeyWakey();
|
