JavaScript코드로 마우스를 따라다니는 원 만들기!

요즘 웹사이트를 돌아다녀 보면 자주 보이는 마우스를 따라다니는 도형들을 볼 수 있습니다.
그래서 그런 기능은 어떻게 구현할 수 있을지 공부하면서 구현을 해보았습니다.

See the Pen Untitled by Shape2ee (@shape2ee) on CodePen.

JavaScript 코드

1. 마우스 좌표 얻기

마우스의 좌표값을 구하는 javascript 프로퍼티에는 종류가 다양한 것으로 알고 있습니다.
대표적으로 clientX, offsetX, pageX, screenX 이렇게 있는데(X를 Y으로 변경하면 Y값 제어)
그중에서 clientX, clientY를 이용했습니다.
이유는 현재 보이는 브라우저의 x,y 좌표 값을 구할 수 있기 때문입니다.
offset은 이벤트 대상 노드를 기준으로 좌표값을 가져오기 때문에 적합하지 않다고 생각하고,
pageX,Y는 전체 문서를 기준으로 x,y 좌표를 반환한다는 것이 비슷한 점일 수도 있지만, 스크롤 화면도 포함해서 측정하여 값이 변하기 때문에 원하는 기능을 구현하기에는 정확하지 않다고 생각했고,
screenX,Y는 모니터 화면을 기준으로 좌표를 제공하기 때문에 적합하지 않아 client를 이용했습니다

2. mousemove

document.addEventListener("mousemove", (e) => {
  const mouseX = e.clientX;
  const mouseY = e.clientY;
  circle.style.left = mouseX + 'px';
  circle.style.top = mouseY + 'px';
})

mousemove 이벤트로 마우스가 움직일때마다 이벤트가 발생하게 하여 x좌표와 y좌표값을 얻어 .circle이 마우스를 따라가도록 구현하였습니다.

느낀점

생각보다 다른 애니메이션 이벤트를 넣지 않아서인지 구현하면서 간단하다라는 생각을 하였습니다.
이번 기회에 마우스의 좌표값을 구하는 다양한 프로퍼티들을 찾아보게 되어 조금은 스스로 정리 할 수 있는 시간이 되었습니다.

참고자료

---

JavaScript - 마우스 따라다니는 원 만들기
clientX, offsetX, pageX, screenX의 차이
https://developer.mozilla.org/ko/