[JS] 커스텀 커서 만들기

기존 마우스 모양을 안보이게 하고 내가 원하는 이미지로 바꾸기

브라우저에서 마우스가 움직일 때 그 위치를 받아오면 끝!

HTML

<img class="mouse_img" src="cursur.png" alt="cursur" />
<div class="tag"></div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
body {
  cursor: none;
  background-color: lightgoldenrodyellow;
}
/* mouse */
.mouse_img {
  position: absolute;
}
.tag {
  position: absolute;
  font-size: 20px;
  margin: 20px 40px 20px;
}

JS

const mouseImg = document.querySelector('.mouse_img');
const mouseImgRect = mouseImg.getBoundingClientRect();
const mouseImgHalfWidth = mouseImgRect.width / 2;
const mouseImgHalfHeight = mouseImgRect.height / 2;
const tag = document.querySelector('.tag');

document.addEventListener('mousemove', (event) => {
  const x = event.pageX;
  const y = event.pageY;
  mouseImg.style.transform = `translate(${x - mouseImgHalfWidth}px, ${
    y - mouseImgHalfHeight
  }px)`;
  tag.style.transform = `translate(${x}px, ${y}px)`;
  tag.innerHTML = `${x}px ${y}px`;
});

1. 이 모든 상황은 마우스가 브라우저에 들어왔을 때이다. 이는 이벤트리스너에게 'mousemove' 일때 아래와 같은 일을 하겠다라고 정의하고 시작한다.
2. event 객체에서 pageX와 pageY값을 받아온다. 이는 마우스가 브라우저페이지에서 움직일 때의 좌표를 받아오기 위함이다.
3. 받아온 좌표를 이미지와 태그에 전달해주면 끝!
4. 여기서 이미지가 좌상단을 시작점으로 보여지므로 가운데로 옮겨질 수 있도록 만들어 준다.
   • getBoundingClientRect 함수를 이용해 이미지 사이즈를 받아온 후, 가로와세로 사이즈의 절반을 받아온 좌표에서 빼주면 된다.

clientX와 ClientY를 쓰지 않았던 이유

clientX와 clientY는 현재 보이는 브라우저 화면이 기준이 되기 때문이다. 그렇다면 스크롤이 있는 문서페이지의 하단은 커스텀 커서가 작동되지 않기 때문이다.

정리

1. pageX, pageY : 브라우저 페이지 전체 기준(스크롤 포함O)

2. clientX, clientY : 현재 보여지는 브라우저 화면 기준(스크롤 포함X)

3. offsetX, offsetY : 이벤트 대상 기준(스크롤 포함O)(현재 파이어폭스에서만 사용)

4. screenX, screenY : 모니터 화면 기준(브라우저 움직여도 값은 같다)