Day16: Mouse Shadow

簡介：如何使用 JavaScript 和 CSS 來實現滑鼠移動時文字陰影效果。

作品頁面：https://iris1114.github.io/javascript30/16_Mouse-Move-Shadow/

HTML

包含一個可編輯的標題 🔥WOAH!，位於一個 div 容器內。

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Mouse Shadow</title>
  </head>
  <body>
    <div class="hero">
      <h1 contenteditable>🔥WOAH!</h1>
    </div>
  </body>
</html>

CSS

設定了基本的頁面樣式，包括字體、顏色和佈局。
h1 標題設置了初始的文字陰影效果。

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;
}

JavaScript

使用 JavaScript 來監聽滑鼠移動事件，並根據滑鼠位置動態更新文字陰影效果。

const hero = document.querySelector('.hero')
const text = hero.querySelector('h1')
const walk = 100 // 100px

function shadow(e) {
  const { offsetWidth: width, offsetHeight: height } = hero
  let { offsetX: x, offsetY: y } = e

  if (this !== e.target) {
    x = x + e.target.offsetLeft
    y = y + e.target.offsetTop
  }

  const xWalk = Math.round((x / width) * walk - walk / 2)
  const yWalk = Math.round((y / height) * walk - walk / 2)

  text.style.textShadow = `
    ${xWalk}px ${yWalk}px 0 rgba(255,0,255,0.7),
    ${xWalk * -1}px ${yWalk}px 0 rgba(0,255,255,0.7),
    ${yWalk}px ${xWalk * -1}px 0 rgba(0,255,0,0.7),
    ${yWalk * -1}px ${xWalk}px 0 rgba(0,0,255,0.7)
  `
}

hero.addEventListener('mousemove', shadow)

Note

使用 offsetWidth 和 offsetHeight 來獲取容器的寬度和高度。
使用 offsetX 和 offsetY 來獲取滑鼠相對於容器的座標。
動態計算文字陰影的偏移量，並應用多重陰影效果。