From 89cadbf468519782bc9c2396d6f3f7d75703d846 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sun, 1 Nov 2020 10:51:09 -0400 Subject: initial commit --- chapter10.js | 45 +++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 45 insertions(+) create mode 100644 chapter10.js (limited to 'chapter10.js') 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(); -- cgit 1.3.0-6-gf8a5