1 files changed, 56 insertions, 0 deletions
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;
+    }
+});