[JS30] Day16: CSS Text Shadow Mouse Move Effect

HTML

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

JavaScript

這一天的目標是要做出隨著滑鼠移動的陰影效果，首先要認識三個屬性

offsetWidth / offsetHeight 該元素的寬跟高(整數部分)，不含 margin 的部分，也不含偽元素(::before, ::after)，可以參考下圖 (取自 MDN)

Note: This property will round the value to an integer. If you need a fractional value, use element.getBoundingClientRect().

offsetX / offsetY (MouseEvent) 會回傳滑鼠與滑鼠指到的元素之間的距離(x, y)，是一個浮數點字串(double)。
offsetLeft / offsetTop 會回傳與母層節點(offsetParent)左上角之間的距離(左方推移，上方推移)

透過這三個屬性，我們來看到程式碼

const hero = document.querySelector(".hero"); // 外面的div
const text = hero.querySelector("h1");

const walk = 500; // 數字越大，離中心h1越遠

hero.addEventListener("mousemove", moving); // 監聽滑鼠移動，呼叫moving

function moving(e) {
  const { offsetWidth: width, offsetHeight: height } = hero; // 取得hero元素的寬長
  let { offsetX: x, offsetY: y } = e; // 滑鼠與指到元素的距離
  if (this !== e.target) {
    x += e.target.offsetLeft;
    y += e.target.offsetTop;
  } // 當滑鼠移到hero之外(h1文字)，要再加上推移的距離

  const xWalk = Math.round((x / width) * walk - walk / 2); // x與width的比例超過50%時，walk大於0；反之亦然
  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 * -1}px 0 rgba(0,255,255,0.7),
    ${yWalk}px ${xWalk}px 0 rgba(0,255,0,0.7),
    ${yWalk * -1}px ${xWalk * -1}px 0 rgba(0,0,255,0.7)
    `;
}

在xWalk和yWalk公式會依據滑鼠在螢幕的位置回傳正負 walk/2的數值，將這個數值做些變化帶入text.style.textShadow，就可以產生不同的陰影效果。

HTML​

JavaScript​

HTML

JavaScript