728x90
반응형

1. 코드

<!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>
</script>
</body>
</html>

2. 결과

<!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 rgb(0, 0, 0);
        font-size: 100px;
      }
    </style>

    <script>
      const h1 = document.querySelector("h1");
      window.onmousemove = function (e) {
        h1.style.textShadow = `
        ${e.clientY - h1.offsetTop - 67}px ${
          -e.clientX + h1.offsetLeft + 230
        }px 0 rgb(0,255,0),
        ${e.clientX - h1.offsetLeft - 230}px ${
          e.clientY - h1.offsetTop - 67
        }px 0 rgb(255,0,255),
        ${-e.clientX + h1.offsetLeft + 230}px ${
          e.clientY - h1.offsetTop - 67
        }px 0 rgb(0,255,255),
        ${-e.clientY + h1.offsetTop + 67}px ${
          e.clientX - h1.offsetLeft - 230
        }px 0 rgb(0,0,255)
        `;
      };
    </script>
  </body>
</html>

3. 리뷰

 

text-Shadow를 js로 불러올때의 형태만 알면 된다.

 

js로 불러올때 형식

h1.style.textShadow = " x  y  blur color" 

blur를 입력해주지 않으면 기본적으로 0이다.

728x90
반응형

'개발 > html, css, js' 카테고리의 다른 글

[JS] var, let, const 차이  (1) 2022.10.05
[30일 챌린지 Day-17] 관사 제외하고 정렬하기  (0) 2022.08.11
[30일 챌린지 Day-15] LocalStorage  (0) 2022.08.11
[30일 챌린지 Day-13] scroll event  (0) 2022.08.09
[30일 챌린지 Day-12] hidden key  (2) 2022.08.09

티스토리툴바