lesson 16

ajshopov · Aug 29, 2019 · 257c1ec · 257c1ec
1 parent 9fc8abb
commit 257c1ec
Showing 1 changed file with 74 additions and 0 deletions.
diff --git a/16-css_text-shadow/index-start.html b/16-css_text-shadow/index-start.html
@@ -0,0 +1,74 @@
+<!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; // 100px
+
+    function shadow (e) {
+        // const width = hero.offsetWidth;
+        // const height = hero.offsetHeight;
+        const { offsetWidth: width, offsetHeight: height } = hero;
+        let { offsetX: x, offsetY: y } = e;
+
+        // e.target will be whatver element your mouse is over
+        // corrects co-ordinates when not on hero div
+        if (this !== e.target) {
+            x += e.target.offsetLeft;
+            y += e.target.offsetTop;
+        }
+
+        console.log(x,y);
+
+        // gives range from -50 to +50
+        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, 255, 0.7),
+            ${xWalk * 0.5}px ${yWalk * 0.5}px 0 rgba(0, 255, 255, 0.7),
+            ${xWalk * -0.5}px ${yWalk * -0.5}px 0 rgba(0, 255, 0, 0.7)
+        `
+    }
+
+    hero.addEventListener('mousemove', shadow);
+
+</script>
+</body>
+</html>