菜菜菜的前端學習日誌 - Day28

蝦毀

今天要說的是 追逐老鼠的影子！！！

哈哈哈～是不是覺得我在工尛

其實就是要做出隨著滑鼠游標移動的文字陰影效果

它的效果會是這樣

實作

那該怎麼做呢？

下面就來實作一下吧

首先就先建立一個容器然後裡面放一段文字吧

並且也將它稍微排版一下

<div class="content">
  <h1>Hello My name is Andy!!</h1>
</div>

<style>
    .content{
      min-height: 100vh;
      display:flex;
      justify-content: center;
      align-items: center;
      color:black;
    }
</style>

好勒！！

架構好了我們就來寫 js 的部分吧

先宣告變數去選取物件

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

因為他會隨著滑鼠游標移動改變所以我們必須監聽滑鼠移動的事件

然後來看看是否成功監聽事件

function shadow(){
    console.log('haha');
}

content.addEventListener('mousemove', shadow);

看樣子我們是有成功監聽的

接下來我們要取得容器的寬高及滑鼠的座標

我們就透過 offsetWidth / offsetHeight 及 offsetX / offsetY來取得

function shadow(e){
    const width = content.offsetWidth;
    const height = content.offsetHeight;
    let x = e.offsetX;
    let y = e.offsetY;

    console.log(width, height, x, y);
}

這樣子我們就成功地取得我們要的參數啦

但是這樣其實有一個問題

滑鼠游標在 h1 範圍及在 div 位置取得的 x 及 y 是不一樣的

因為滑鼠一定事件在這兩個元素取得的 x 及 y 是以當前元素為基準

但是我們想要的到的是以整個容器為基準

所以當滑鼠游標移到 h1 上時取得的 xy值應該要再加上 h1 本身的座標值才是我們要的數值

我們就透過 e.target 去判斷

如果滑鼠游標移到 h1 時的 xy 值會再加上元素本身座標值

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

這樣子就能正確地取得我們要的參數了

得到參數後就接近尾聲啦！！！

就是設定 text-shadow 啦

我們再多設一個參數來決定陰影的遠近，如果想要近一點可以改小一點，想要遠一點就改大一點吧

const walk = 100;

然後就來設定 text-shadow

首先就來取得要設定 text-shadow 的參數

const xWalk = (x / width * walk) - (walk / 2);
const yWalk = (y / height * walk) - (walk / 2);

這樣子就取得參數了

但是這參數好多小數點好醜啊！！！

就讓它變整數吧～

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

最後就就執行最後一步 設定text-shadow屬性 啦

text.style.textShadow = `${xWalk}px ${yWalk}px 0 rgba(0, 0, 0, 0.5)`;

最後的成果就是這樣啦