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();