mousemove 시 따라 다니는 커서 이미지 wheel 할 경우

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

작성

커서를 따라다니는 나비 화면에서

mousemove 이벤트에만 커서가 움직이고,
마우스휠(wheel 이벤트)을 할 경우에는 나비 이미지가 움지이지 않아

대략 아래와 같이 패턴으로 마우스 휠의 경우에도 움직임을 추가해 봤습니다.

그런데 wheel 이벤트의 경우에는 나비가 커서 위치에 제대로 붙지 않고,
마우스를 조금이라도 움직여야 제대로 위치를 잡더라고요.

마우스 휠 이벤트일 때
어떻게 보완하면 좋은지 조언 부탁드립니다.

const cursor = document.querySelector('.box');
let x = 0;
let y = 0;

window.addEventListener('mousemove', function(e){
  x = e.pageX;
  y = e.pageY;
  cursorMove();
});


window.addEventListener('wheel', function(e){
  x = e.pageX;
  y = e.pageY;
  cursorMove();
});

function cursorMove() {
  cursor.style.transform = `translate(${x}px , ${y}px)`;
}

javascript 인터랙티브-웹

답변 2

코딩일레븐

지식공유자

안녕하세요 ai가 답변을 달아줬군요? 허허

일단 wheel 이벤트에 x,y값을 변경하고 싶으신 이유가 페이지는 스크롤 이동 되는데 커서는 그대로 있어서겠죠? mouse move 이벤트는 마우스를 움직여야 발생하니까 그렇게 되는데요.

ai답변이랑 비슷한데 requestAnimationFrame 을 이용해보세요. 강의 뒤에 나올텐데요.

아래 코드가 계속 돌아가면 스크롤이 어디에 있던 따라다닐거에요.

스크롤 이벤트에는 직접 함수를 작성하지 않으셔도 됩니다.

requestAnimationFrame(() => {
    x = e.pageX;
    y = e.pageY;
    cursor.style.transform = `translate(${x}px, ${y}px)`;
});

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

osk님께서 작성하신 코드에서, mousemove와 wheel 이벤트 시 커서가 움직이지 않는 문제를 해결하는 방법을 살펴보겠습니다.

문제는 wheel 이벤트가 발생할 때 x, y 좌표를 제대로 갱신하지 못하는 데 있습니다. 마우스 휠 이벤트의 경우 e.pageX와 e.pageY가 예상한 대로 동작하지 않을 수 있습니다. 이 때문에, mousemove 이벤트가 발생하지 않는 동안의 wheel 이벤트에 대한 처리를 다른 방식으로 해주는 것이 좋습니다. 예를 들면, mousemove의 마지막 위치를 기억하고 wheel을 통해 페이지가 이동했을 때도 그 위치에 따라 움직임을 추적해야 합니다.

다음은 이를 위한 예시 코드입니다:

const cursor = document.querySelector('.box');
let x = 0;
let y = 0;
let isMouseMoving = false;

window.addEventListener('mousemove', function(e){
  isMouseMoving = true;
  x = e.pageX;
  y = e.pageY;
  cursorMove();
});

window.addEventListener('wheel', function(e){
  if (!isMouseMoving) {
    x += e.deltaX; // 페이지의 수평 스크롤 값 추가
    y += e.deltaY; // 페이지의 수직 스크롤 값 추가
    cursorMove();
  }
});

function cursorMove() {
  requestAnimationFrame(() => {
    cursor.style.transform = `translate(${x}px, ${y}px)`;
    isMouseMoving = false; // 이동 후에 상태 리셋
  });
}

여기서는 wheel 이벤트에서 deltaX, deltaY를 사용하여 페이지 스크롤 이동을 보완했습니다. 또한, requestAnimationFrame을 사용하여 성능을 최적화하고 부드럽게 움직이도록 조정했습니다.

관련하여 질문과 유사한 내용이 아래 링크에서 논의된 적이 있으니 참고하시면 도움이 될 것입니다:

마우스 이동중에 궁금한점이 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실

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

mousemove 시 따라 다니는 커서 이미지 wheel 할 경우