인프런 커뮤니티 질문&답변

작성한 질문수

몇 줄로 끝내는 인터랙티브 웹 개발 노하우 [초급편]

안녕하세요 질문 남깁니다.

해결된 질문

작성

224

개인 포트폴리오를 만들 때 해당 기능을 구현해보려고 시도했습니다. 동작이 잘 되는데 이상하게 스크롤을 내린 후cursorPointer가 제가 스크롤을 내리기 전 위치에서 커서를 따라오지 않고 있더라구요 코드에 이상이 있는걸까요? 확인해주시면 감사하겠습니다!

let cursorPointer;
let x = 0;
let y = 0;
let mx = 0;
let my = 0;
let speed = 0.1;

window.onload = function () {
  cursorPointer = document.getElementsByClassName("cursor-pointer")[0];
  
  window.addEventListener("mousemove", mouseFunc);

  function mouseFunc(e) {
    x = e.clientX;
    y = e.clientY; 
  }
  loop();
}

function loop() {
  mx += (x - mx) * speed;
  my += (y - my) * speed;

  cursorPointer.style.transform = "translate("+ mx +"px,"+ my +"px)";
  window.requestAnimationFrame(loop);
}
// css
.cursor-pointer {
  position: absolute;
  width: 50px;
  height: 50px;
  top: 0px;
  left: 0px;
  border-radius: 50%;
  background-color : rgba(211, 17, 69,0.6);
}