iT邦幫忙

第 11 屆 iT 邦幫忙鐵人賽

DAY 16
0
自我挑戰組

新手村-30 Day JS Coding Challenge系列 第 16

新手村16 - Mouse Move Shadow

16 - Mouse Move Shadow

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

一天一 JS,What the f*ck JavaScript?

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

完成目標

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

index_START.html

<!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 來製作文字陰影效果,當我們滑鼠移動時可以觸發效果,因此,第一步就先來看看滑鼠移動的觸發事件吧!

<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

<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

<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>

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

<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

<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


上一篇
新手村15 - LocalStorage
下一篇
新手村17 - Sort Without Articles
系列文
新手村-30 Day JS Coding Challenge30

尚未有邦友留言

立即登入留言