iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 28
0
Modern Web

菜菜菜的前端學習日誌系列 第 28

追逐老鼠的影子

菜菜菜的前端學習日誌 - 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 / offsetHeightoffsetX / 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)`;

最後的成果就是這樣啦


上一篇
jQuery 好玩的捲軸收合效果
下一篇
剪裁效果
系列文
菜菜菜的前端學習日誌30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言