[Day16] CSS Text Shadow Mouse Move Effec

[Day16] CSS Text Shadow Mouse Move Effect

滑鼠移动 物件更换影子位置

需要用到的技巧与练习目标

1. mousemove
2. Math.round
3. offsetX offsetY

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

const xWalk = Math.round((x / width*walk) - (walk /2));

const yWalk =Math.round( (y / Height*walk) - (walk /2));

text.style.textShadow=`${xWalk}px ${ywalk}px 0 red`

}

hero.addEventListener('mosemove',shadow)