新手村16 - Mouse Move Shadow

16 - Mouse Move Shadow

俗話說的好，一天一蘋果，醫生遠離我

一天一 JS，What the f*ck JavaScript？

small steps every day - 記錄著新手村日記

完成目標

  • 功能
    • 移動滑鼠文字陰影要能移動
  • 畫面
    • 陰影要隨著滑鼠相對的位子來修改距離

index_START.html

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Mouse Shadow</title>
</head>
<body>

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

  <style>
  html {
    color: black;
    font-family: sans-serif;
  }

  body {
    margin: 0;
  }

  .hero {
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: black;
  }

  h1 {
    text-shadow: 10px 10px 0 rgba(0,0,0,1);
    font-size: 100px;
  }
  </style>

<script>
</script>
</body>
</html>

JS - step by step

首先，在這個範例中，我們要針對 hero 這個 Class 來製作文字陰影效果，當我們滑鼠移動時可以觸發效果，因此，第一步就先來看看滑鼠移動的觸發事件吧！

1
2
3
4
5
6
7
<script>

  document.querySelector('.hero').addEventListener("mousemove",function(e){
    console.log(e);
  });
  // offsetX , offsetY
</script>

如果將座標做成百分比的形式呈現於畫面上

HTMLElement.offsetWidth：https://tinyurl.com/yxqsypky
HTMLElement.offsetHeight：https://tinyurl.com/y2j7nxg2

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>

  document.querySelector('.hero').addEventListener("mousemove",function(e){
    // console.log(e);
    let { offsetX, offsetY } = e;
  
    console.log(
      Math.floor((offsetX / this.offsetWidth)*100), 
      Math.floor((offsetY / this.offsetHeight)*100)
    );
  });  
  
</script>

這時候會出現一個問題，從console可以看到我們接近螢幕左上角的時候數值會趨近於零、右下角的時候會趨近於一百，然而唯獨在中間我們不是在Class hero 的時候（也就是文字的區塊時），數字會被打亂，這也跟 offsetX、offsetY 的特性有所關聯，我們算到的是中間物件的 Offset

HTMLElement.offsetLeft：https://tinyurl.com/yxv8sthk
HTMLElement.offsetTop：https://tinyurl.com/yymxkgxa

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>

  document.querySelector('.hero').addEventListener("mousemove",function(e){
    // console.log(e);
    let { offsetX, offsetY } = e;

    if (e.target !== this.target) {
      offsetX += e.target.offsetLeft;
      offsetY += e.target.offsetTop;
    }

    console.log(
      Math.floor((offsetX / this.offsetWidth)*100), 
      Math.floor((offsetY / this.offsetHeight)*100)
    );
  });  
  
</script>

接下來就來增加文字陰影吧！

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>

  let text = document.querySelector('h1');
  document.querySelector('.hero').addEventListener("mousemove",function(e){
    // console.log(e);
    let { offsetX, offsetY } = e;

    if (e.target !== this) {
      offsetX += e.target.offsetLeft;
      offsetY += e.target.offsetTop;
    }

    let textoffsetX = Math.floor((offsetX / this.offsetWidth)*100) * 2 - 100;
    let textoffsetY = Math.floor((offsetY / this.offsetHeight)*100)* 2 - 100;

    text.style.textShadow = `
      ${textoffsetX}px ${textoffsetY}px 10px rgba(10,10,10,10) 
    `
  });  
  
</script>

就大功告成啦！

JS - final

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
  let text = document.querySelector('h1');
  document.querySelector('.hero').addEventListener("mousemove",function(e){
    // console.log(e);
    let { offsetX, offsetY } = e;

    if (e.target !== this) {
      offsetX += e.target.offsetLeft;
      offsetY += e.target.offsetTop;
    }

    let textoffsetX = Math.floor((offsetX / this.offsetWidth)*100) * 2 - 100;
    let textoffsetY = Math.floor((offsetY / this.offsetHeight)*100)* 2 - 100;

    text.style.textShadow = `
      ${textoffsetX}px ${textoffsetY}px 10px rgba(10,10,10,10) 
    `
  });  
</script>

本刊同步於個人網站：http://chestertang.site/

本次範例程式碼原作者來源：https://tinyurl.com/yavm5f5n