initial commit

1 files changed, 105 insertions, 0 deletions

diff --git a/chapter14.js b/chapter14.js
new file mode 100644
index 0000000..e604cb8
--- /dev/null
+++ b/chapter14.js
@@ -0,0 +1,105 @@
+const el1 = document.getElementById('encircle');
+const el2 = document.getElementById('entrap');
+const el3 = document.getElementById('encroach');
+const el4 = document.getElementById('entomb');
+const el5 = document.getElementById('enclose');
+const elW1 = document.getElementById('white1');
+const elW2 = document.getElementById('white2');
+const elG1 = document.getElementById('gray1');
+const elG2 = document.getElementById('gray2');
+const body = document.body;
+const article = document.querySelector('article');
+
+let tick = false;
+function enflame() {
+    const rect1 = el1.getBoundingClientRect();
+    const rect2 = el2.getBoundingClientRect();
+    const rect3 = el3.getBoundingClientRect();
+    const rect4 = el4.getBoundingClientRect();
+    const rect5 = el5.getBoundingClientRect();
+    const rectW1 = elW1.getBoundingClientRect();
+    const rectW2 = elW2.getBoundingClientRect();
+    const rectG1 = elG1.getBoundingClientRect();
+    const rectG2 = elG2.getBoundingClientRect();
+    const start1 = window.scrollY + rect1.y;
+    const stop1 = window.scrollY + rect2.y + rect2.height;
+    const start2 = window.scrollY + rect3.y;
+    const stop2 = window.scrollY + rect4.y + rect4.height;
+    const start3 = window.scrollY + rect5.y;
+    const stop3 = window.scrollY + rect5.y + rect5.height;
+    const startW = window.scrollY + rectW1.y;
+    const stopW = window.scrollY + rectW2.y + rectW2.height;
+    const startG = window.scrollY + rectG1.y;
+    const stopG = window.scrollY + rectG2.y + rectG2.height;
+    const y = window.scrollY + window.innerHeight;
+    let step;
+    let prog;
+    if (y < start1) {
+        step = 1;
+        prog = 0;
+    } else if (y > stop1) {
+        if (y < start2) {
+            step = 1;
+            prog = 1;
+        } else if (y > stop2) {
+            if (y < start3) {
+                step = 2;
+                prog = 1;
+            } else if (y > stop3) {
+                if (y < startW) {
+                    step = 3;
+                    prog = 1;
+                } else if (y > stopW) {
+                    if (y < startG) {
+                        step = 'W';
+                        prog = 1;
+                    } else if (y > stopG) {
+                        step = 'G';
+                        prog = 1;
+                    } else {
+                        step = 'G';
+                        prog = (y - startG) / (stopG - startG);
+                    }
+                } else {
+                    step = 'W';
+                    prog = (y - startW) / (stopW - startW);
+                }
+            } else {
+                step = 3;
+                prog = (y - start3) / (stop3 - start3);
+            }
+        } else {
+            step = 2;
+            prog = (y - start2) / (stop2 - start2);
+        }
+    } else {
+        step = 1;
+        prog = (y - start1) / (stop1 - start1);
+    }
+    if (step === 1) {
+        interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(120, 104, 74)'));
+    } else if (step === 2) {
+        interpolateStyle(body, 'background-color', itpColor(1, 'rgb(120, 104, 74)'));
+        interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(70, 34, 14)'), false);
+    } else if (step === 3) {
+        interpolateStyle(body, 'background-color', itpColor(1, 'rgb(70, 34, 14)'));
+        interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(83, 83, 83)'), false);
+    } else if (step === 'W') {
+        interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(255, 255, 255)'));
+    } else if (step === 'G') {
+        interpolateStyle(body, 'background-color', itpColor(1, 'rgb(255, 255, 255)'));
+        interpolateStyle(body, 'background-color', itpColor(prog, 'rgb(83, 83, 83)'), false);
+    }
+    // interpolateStyle(article, 'background-color', itpColor(prog, 'rgb(30, 30, 30)'));
+    // interpolateStyle(article, 'color',            itpColor(prog, 'rgb(255, 255, 255)'));
+}
+
+window.addEventListener('scroll', event => {
+    if (!tick) {
+        requestAnimationFrame(() => {
+            enflame();
+            tick = false;
+        });
+        tick = true;
+    }
+});