Day16 Mouse Shadow

發表於 | 分類於 | 閱讀次數:
| 599

Demo

這周的範例要操作文字陰影的動畫

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

在原始檔範例中第一次見到contenteditable這個屬性
顧名思義就是讓文字內容可以編輯，真的滿少見的。

text-shadow

先看一下text-shadow這個屬性吧

1
text-shadow: 10px 10px 0 rgba(0, 0, 0, 1);

4個值依序為：

  • 水平方向(左右)位移距離
  • 垂直方向(上下)位移距離
  • 模糊半徑
  • 顏色

以上為一組陰影的屬性，
達到多重陰影效果就在後面加入新的一組屬性即可

這裡有詳細說明

所以這邊就很清楚可以知道我們要操作的屬性就是前兩個值。

中心座標

我們先定義變數與觸發條件，事件觸發在hero身上，目標對象為mytext
並且在滑鼠移動的時候觸發涵式。

1
2
3
4
const hero = document.querySelector('.hero')
const mytext = document.querySelector('h1')

hero.addEventListener('mousemove', Handler)

因範例需求，文字位於畫面中央，陰影隨滑鼠位置與中心位置的距離而變化
所以透過以下方法取得滑鼠與中心位置

1
2
3
4
5
6
7
8
function Handler(e) {
  const mousePos = {
    x: e.clientX,
    y: e.clientY
  }
  const centerX = window.innerWidth / 2 //中心點
  const centerY = window.innerHeight / 2 
}

為什麼這邊不用offset?client是什麼?
首先，offset代表的是(滑鼠)該元素下的相對座標，在此例中該元素為.hexo，此時如果滑鼠進入h1(mytext)，即離開了原本的該元素，會發生座標跳動的問題；而client座標表示滑鼠相對於整個頁面的位置。

程式碼

最後我們只要取得滑鼠座標與中心的距離，並將取得的值帶入mytext的style中

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

const hero = document.querySelector('.hero')
const mytext = document.querySelector('h1')

function Handler(e) {
  const mousePos = {
    x: e.offsetX,
    y: e.offsetY
  }
  console.log(mousePos)
  const centerX = window.innerWidth / 2 //中心點
  const centerY = window.innerHeight / 2 

  const shadowX = mousePos.x - centerX
  const shadowY = mousePos.y - centerY

  mytext.style.textShadow = `
${shadowX}px ${shadowY}px 0 rgba(255,0,255,0.7),
${shadowX * -1}px ${shadowY}px 0 rgba(0,255,255,0.7),
${shadowY}px ${shadowX * -1}px 0 rgba(0,255,0,0.7),
${shadowY * -1}px ${shadowX}px 0 rgba(0,0,255,0.7)
`
}
hero.addEventListener('mousemove', Handler)

這邊值得注意的是原本的css屬性名稱text-shadow在js中是採用駝峰的寫法textShadow

0%