Web APIs (2)

mousemove

mouse가 움직일 때마다 clientX, clientY로 마우스의 위치좌표를 가져와서 x선, y선, 타겟 이미지, 텍스트를 translate로 재배치 한다.

window.addEventListener('mousemove', (event) => {
  const x = `calc(${event.clientX}px - 50%)`;
  const y = `calc(${event.clientY}px - 50%)`;
  
  target.style.transform = `translate(${x}, ${y})`;
  text.style.transform = `translate(calc(${event.clientX}px + 25%), ${event.clientY}px)`;
  text.textContent = `${event.clientX}px, ${event.clientY}px`;
  lineX.style.transform = `translateY(${y})`;
  lineY.style.transform = `translateX(${x})`;
});