Javascript小型專案練習18 Mouse Move Shadow(JS30-16)

HTML

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

CSS

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

Javascript

    // 決定陰影的範圍
    const walk = 100;

    // 選取元素
    const hero = document.querySelector('.hero')
    const text = hero.querySelector('h1')

    // 建立功能函數
    function shadow(e) {
      const { offsetWidth: width, offsetHeight: height } = hero
      let { offsetX: x, offsetY: y } = e;
      // 若碰到子元素 座標調整
      if (this !== e.target) {
        x = x + e.target.offsetLeft;
        y = y + e.target.offsetTop;
      }

      // 設定陰影的範圍，此為-50~50
      const xWalk = (x / width * walk) - walk / 2
      const yWalk = (y / height * walk) - walk / 2

      // 增加文字陰影
      text.style.textShadow = `
      ${xWalk}px ${yWalk}px 5px red,
      ${-xWalk}px ${-yWalk}px 0 yellow
      `
    }

    // 設定監聽器
    hero.addEventListener('mousemove', shadow) 

 

學習重點

• 了解contenteditable的用法，這個挺新鮮的 第一次看到
• 複習textShadow的用法(水平陰影 垂直陰影 模糊半徑 色彩)，可同時套用多個讓不同方向同時出現文字陰影
• 了解如何修正當offsetX/offsetY碰到子元素時會造成的座標偏移，教學中提到的可說是最簡單的一種

最終成品

參考文章

JS一秒區分clientX,offsetX,screenX,pageX之間關係
MDN-textShadow