diff options
Diffstat (limited to 'chapter10.js')
-rw-r--r-- | chapter10.js | 45 |
1 files changed, 45 insertions, 0 deletions
diff --git a/chapter10.js b/chapter10.js new file mode 100644 index 0000000..a277f90 --- /dev/null +++ b/chapter10.js @@ -0,0 +1,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(); |