From 265802e516ded2bc6792559054f91aafbd632388 Mon Sep 17 00:00:00 2001
From: changicho <changicho29@gmail.com>
Date: Sun, 14 Jun 2020 13:26:18 +0900
Subject: [PATCH] Feat: Add 16 - Mouse Move Shadow
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

?: mousemove event에 style.textShadow변경 evt 설정
text-shadow는 문자에 그림자를 주는 속성
중복 적용 가능
---
 16 - Mouse Move Shadow/changi.html | 66 ++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 16 - Mouse Move Shadow/changi.html
diff --git a/16 - Mouse Move Shadow/changi.html b/16 - Mouse Move Shadow/changi.html
new file mode 100644
index 0000000..71b2ca1
--- /dev/null
+++ b/16 - Mouse Move Shadow/changi.html	
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <title>Mouse Shadow</title>
+  </head>
+  <body>
+    <div class="hero">
+      <h1 contenteditable>🔥WOAH!</h1>
+    </div>
+
+    <style>
+      html {
+        color: black;
+        font-family: sans-serif;
+      }
+
+      body {
+        margin: 0;
+      }
+
+      .hero {
+        min-height: 100vh;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        color: black;
+      }
+
+      h1 {
+        text-shadow: 10px 10px 0 rgba(0, 0, 0, 1);
+        font-size: 100px;
+      }
+    </style>
+
+    <script>
+      const hero = document.querySelector(".hero");
+      const text = document.querySelector("h1");
+      const walk = 100;
+
+      function shadow(evt) {
+        const { offsetWidth: width, offsetHeight: height } = hero;
+        let { offsetX: x, offsetY: y } = evt;
+
+        if (this !== evt.target) {
+          x += evt.target.offsetLeft;
+          y += evt.target.offsetTop;
+        }
+
+        const xWalk = Math.round((x / width) * walk - walk / 2);
+        const yWalk = Math.round((y / height) * walk - walk / 2);
+
+        // console.log(xWalk, yWalk);
+
+        text.style.textShadow = `
+          ${xWalk}px ${yWalk}px 0 rgba(255,0,0,0.1),
+          ${-xWalk}px ${yWalk}px 0 rgba(0,255,0,0.1),
+          ${xWalk}px ${-yWalk}px 0 rgba(0,0,255,0.1),
+          ${-xWalk}px ${-yWalk}px 0 rgba(128,128,0,0.1)
+        `;
+      }
+
+      hero.addEventListener("mousemove", shadow);
+    </script>
+  </body>
+</html>
