js16 - Mouse Move Shadow

内容

html部分

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

css部分

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

js部分

<script>
  //获取相关项
  const hero = document.querySelector('.hero');
  const text = hero.querySelector('h1');
  const factor = 0.4; //鼠标移动时 阴影距离占hero宽高的比例

  function shadowMove(e){
    //获取hero中width以及height值
    const { offsetWidth: width, offsetHeight: height } = hero;
    //获取鼠标x y坐标
    let { offsetX: x, offsetY: y } = e;
    if(this !== e.target){
      //使x y坐标实时变更
      x = x + e.target.offsetLeft;
      y = y + e.target.offsetTop;
    }
    //获取距离中心位置
    const xdistance = parseInt((x-width/2)*factor)
    const ydistance = parseInt((y-height/2)*factor)
    //给阴影赋值
    text.style.textShadow = `
      ${xdistance}px ${ydistance}px 0 rgba(255,0,255,0.7),
      ${xdistance * -1}px ${ydistance}px 0 rgba(0,255,255,0.7),
      ${ydistance}px ${xdistance * -1}px 0 rgba(0,255,0,0.7),
      ${ydistance * -1}px ${xdistance}px 0 rgba(0,0,255,0.7)
    `;
}
  hero.addEventListener('mousemove',shadowMove)
</script>