「JavaScript 30」學習筆記（十六）

前言

本文為「JavaScript 30」教學影片的學習筆記。

目標

做出讓文字陰影隨著滑鼠移動而改變方向的效果。

筆記

取得文字框元素。

const hero = document.querySelector('.hero');

取得文字元素。

const text = document.querySelector('h1');

設定陰影效果的基本長度。

const walk = 100;

---

設定一個 shadow() 方法以處理陰影效果。

function shadow(e) {
    // 利用解構賦値，把 hero.offsetWidth 的値賦予 width；把 hero.offsetHeight 的値賦予 height
    const { offsetWidth: width, offsetHeight: height } = hero;

    // 從物件解構賦値，把 e.offsetX 的値賦予 x；把 e.offsetX 的値賦予 y
    let { offsetX: x, offsetY: y } = e;

    // 如果滑鼠在文字框以外就加上目前座標値
    if (this !== e.target) {
        x = x + e.target.offsetLeft;
        y = y + e.target.offsetTop;
    }

    // 將滑鼠座標以 -50 到 50 的量度呈現
    // 即滑鼠座標除以螢幕的高與寬後，
    // 乘以陰影效果的基本長度，
    // 再減掉陰影效果的基本長度的一半
    const xWalk = Math.round((x / width * walk) - (walk / 2));
    const yWalk = Math.round((y / width * 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)
    `;
}

---

監聽文字框，當發生 mousemove 事件時，觸發 shadow() 方法。

hero.addEventListener('mousemove', shadow);