滑鼠陰影效果(Mouse Shadow)

今天我們要實作一個很酷的小效果，讓頁面中的文字隨著滑鼠的移動而產生動態陰影。這種效果在視覺上非常吸引人，而且很容易實作出來，只需要用到一點點JavaScript和CSS！

步驟1:設置HTML
首先，我們需要一個基礎的HTML結構。這裡很簡單，只需要一個大的區域(.hero)來放置一個可以編輯的標題文字。使用div和h1元素就可以完成。

html

<div class="hero">
    <h1 contenteditable>🔥WOW!</h1>
</div>

這段HTML主要是建立一個區域，裡面有一個可以編輯的文字，方便測試時可以隨時更改文字內容。

步驟2:美化頁面(CSS)
接下來，我們用一些簡單的CSS來讓頁面看起來更漂亮一些。這裡會讓文字居中顯示，並設定一個基礎的文字陰影。

css

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

這段CSS的重點是將.hero設置成一個全屏的區域，並且讓文字在頁面中間顯示。text-shadow設置了一個初始的陰影效果，讓文字看起來有點立體感。

步驟3: 加入滑鼠陰影效果(JavaScript)
現在進入今天的重點——讓文字隨著滑鼠移動產生動態陰影。這部分透過JavaScript實現，我們會監聽滑鼠移動事件，並根據滑鼠的位置來調整文字的陰影方向和距離。

javascript

const hero = document.querySelector('.hero');
const text = hero.querySelector('h1');
const walk = 500; // 陰影的最大移動範圍

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

  // 調整當滑鼠位於h1內部時的x, y值
  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);

這裡的重點是shadow函數，我們根據滑鼠在.hero區域中的位置，計算出陰影應該如何偏移。xWalk和yWalk是陰影的移動量，隨著滑鼠的移動，文字的陰影也會跟著變化。

關鍵點：
offsetX和offsetY：取得滑鼠相對於.hero區域的X和Y座標。
陰影效果：透過text-shadow讓文字產生不同顏色和方向的陰影，營造出立體的效果。
動態更新陰影：每次滑鼠移動都會根據當前的位置即時更新文字的陰影效果。
最終效果
當你移動滑鼠時，文字會根據滑鼠的方向和距離變換不同的陰影，讓它看起來非常動態有趣。這樣的效果在許多網站或展示頁面中都能看到，實作起來其實並不難！