Text-Shadow-Effect/index.html at main · Jonorusc/Text-Shadow-Effect · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
  <head>
    <style>
      body {
        background: #f2f2f2;
      }
      #myText {
        position: absolute;
        top: 30%;
        left: 50%;
        transform: translate(-50%, -30%);
        height: 20rem;
        width: 20rem;
        display: grid;
        place-items: center;
        background: blueviolet;
        color: wheat;
        font-size: 40px;
        text-shadow: 0 0 10px #fff;
      }
    </style>
  </head>
  <body>
    <div id="myText">Hello World!</div>
    <script>
      const text = document.querySelector("#myText");
      document.addEventListener("mousemove", (e) => {
        const x = e.clientX;
        const y = e.clientY;
        const textX = text.offsetLeft + text.offsetWidth / 2;
        const textY = text.offsetTop + text.offsetHeight / 2;
        const distanceX = x - textX;
        const distanceY = y - textY;
        const distance = Math.sqrt(
          distanceX * distanceX + distanceY * distanceY
        );
        const maxDistance = 300;

        text.style.textShadow = `
					${(distanceX / maxDistance) * 10}px ${(distanceY / maxDistance) * 10}px ${(distance / maxDistance) * 3}px #ff00ff,
					${(distanceX / maxDistance) * 20}px ${(distanceY / maxDistance) * 20}px ${(distance / maxDistance) * 3}px #00ffff,
          ${(distanceX / maxDistance) * 30}px ${(distanceY / maxDistance) * 30}px ${(distance / maxDistance) * 3}px #ffff00
        `;
      });
    </script>
  </body>
</html>