From 89cadbf468519782bc9c2396d6f3f7d75703d846 Mon Sep 17 00:00:00 2001 From: "(quasar) nebula" Date: Sun, 1 Nov 2020 10:51:09 -0400 Subject: initial commit --- chapter9.js | 56 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 56 insertions(+) create mode 100644 chapter9.js (limited to 'chapter9.js') diff --git a/chapter9.js b/chapter9.js new file mode 100644 index 0000000..a2b5800 --- /dev/null +++ b/chapter9.js @@ -0,0 +1,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; + } +}); -- cgit 1.3.0-6-gf8a5