Ex16 - Mouse move shadow

fthebaud · fthebaud · commit 0210fa69e666 · 2017-01-10T15:09:12.000+01:00
diff --git a/16 - Mouse Move Shadow/index.html b/16 - Mouse Move Shadow/index.html
@@ -0,0 +1,37 @@
+<!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;
+  }
+
+  .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 src="script.js" charset="utf-8"></script>
+
+</body>
+</html>
diff --git a/16 - Mouse Move Shadow/script.js b/16 - Mouse Move Shadow/script.js
@@ -0,0 +1,27 @@
+'use strict';
+
+const hero = document.querySelector('.hero');
+const text = hero.querySelector('h1');
+const walk = 100; // distance max => max coordinates are going to be -50 et +50 around the element
+
+const {offsetHeight: height, offsetWidth: width} = hero;
+
+function shadow(event) {
+  let {offsetX: x, offsetY: y} = event;
+  //this = hero, but event.target = hero or h1 (children of hero)
+  if (this !== event.target) {
+    x += event.target.offsetLeft;
+    y += event.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 rgb(87, 140, 32),
+    ${xwalk * -1}px ${ywalk * - 1}px 0 rgb(164, 111, 5)
+  `;
+}
+
+
+hero.addEventListener('mousemove', shadow);
