[JAVASCRIPT] 마우스커서 따라 움직이는 효과

 

마우스 커서 자체를 변경해서 새로운 느낌을 줄 수 있지만 다른 요소를 마우스 커서에 따라다니게 하면 더 관심을 살 수 있을 것이다.

 

HTML

<div class="point">

  <div class="point-cursor"></div>

</div>

그냥 큰 div안에 point-cursur라는 저 따라다니는 것을 만들어 주었다.

 

CSS

.point{

  width: 100vw;

  height: 200vh;

  position: relative;

}

.point-cursor{

  width: 300px;

  height: 300px;

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  background: radial-gradient(#abc574, #674bca);

  filter: blur(20px);

  border-radius: 50%;

  transition: all 0.3s;

}

커서의 모양을 잡아주고 position: absolute를 해서 우선 중간으로 오게 top, left, transform값을 조정해준다.

 

JAVASCRIPT

const pointCursor = document.querySelector('.point-cursor');

window.addEventListener('pointermove', function(e){

    pointCursor.animate({

      left: `${e.clientX}px`,

      top: `${e.clientY + window.scrollY}px`

    },{duration: 600, fill:'forwards'});

});

우선 window에 이벤트리스너로 pointermove라는 코드를 사용해준다. pointermove는 마우스커서의 움직임을 파악한다.

 

* mousemove와 같은 기능인데 차이점은 pointermove를 사용하면 모바일에서도 인식이 된다고 한다.

 

pointcursor에 animate코드를 걸어주고 left와 top값을 조정하는 애니메이션을 걸어준다. duration은 마우스가 움직였을 때 얼마 정도로 따라가는지 지속시간을 나타내는데, 클수록 늦게 따라오고 작을수록 빨리 따라온다. fill부분은 css의 애니메이션과 똑같이 forwards를 작성하면 따라오고나서 원래대로 돌아가지않고 따라온 상태를 유지시켜준다.

 

처음에 100vh로 작업했을 땐 무난하게 잘 됐는데 200vh로 바꿔서해보니 스크롤이 내려간 후에 커서가 안내려오는걸 확인했다. 계속 고민하다가 console창에 e.clientY를 찍어보니 스크롤을 내려도 스크롤 내린 만큼의 Y값이 아닌 지금 화면의 Y값만 계속 표시되었다. 그래서 + window.scrollY로 스크롤 내린 값을 더해주니 height의 크기가 커져도 문제없이 잘 따라오는 것을 확인했다.