javascript 30 — CSS Text Shadow Mouse Move Effect day16

I’m way behind schedule… aaaaaaaah!!!

#done

• let vs const variable
• element.offsetWidth, offsetHeight
  - width, height of the element ‘hero’
• destructuring assignment

let {offsetX: x, offsetY: y} = e; 
equal to..
let x = e.offsetX, y = e.offsetY;

• if you desire only the element target moves
• this = parent div ‘hero’
• e.target = child tag ‘h1’ which contains text

if(this !== e.target){ // if e.target is not div hero then print out below
      x = x + e.target.offsetLeft;
      y = y + e.target.offsetTop;
    }
hero.addEventListener('mousemove', movingShadow);

• calculate the movement of text shadow.
• object.style.textShadow=”x(h) y(v) blur-radius color”

const walk = 100;
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`

• offsetX — mouse pointer
• width —screen width
• text.style.textShadow = ‘50px 10px 0 red’;
• 2/958 *100(convert into a percentage) so that 958px = 100%
• (x/958 * 100) — 50 , this will has also -50%
• xwalk —the position of the text element in maximum 50px or minimum -50px

#result