강의

멘토링

로드맵

Inflearn brand logo image

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

m22h님의 프로필 이미지
m22h

작성한 질문수

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

좀 이상한데 이유를 모르겠네요.

작성

·

125

0

시간이 지나면서 빨간 박스가 커서에 따라붙는데 걸리는 시간이 점점 줄어들고 나중에는 완전히 딱 붙어 다니게 됩니다.

저만 이런건가요? 아니면 강사님 코드도 나중에 그렇게 되나요?

만약에 저만 그런거라면... 코드는 몇번을 재확인 해도 똑같이 친거 같은데 뭐가 문젤까요?

let h1, cursorItem;
let x = 0, y = 0;
let mx = 0, my = 0;
let speed = 0.001;

window.onload = function() {
    h1 = document.querySelector('.test-h1');
    cursorItem = document.querySelector('.cursor-item');
    
    function mouseFunc(e) {
        x = e.clientX;
        y = e.clientY;                
        loop();
    }

    window.addEventListener('mousemove', mouseFunc, false);
};

function loop() {
    mx += (x - mx) * speed;
    my += (y - my) * speed;
    h1.innerHTML = `x: ${x}, mx: ${mx}`;

    cursorItem.style.transform = `translate(${mx}px, ${my}px)`;
    window.requestAnimationFrame(loop);
}

답변 1

0

코딩일레븐님의 프로필 이미지
코딩일레븐
지식공유자

안녕하세요 loop()를 mousemove 밖으로 빼주세요. 마우스 움직일때마다 계속 실행이 중복되고 있어요. Loop를 한번만 실행 시켜주세요.

m22h님의 프로필 이미지
m22h
질문자

아! 감사합니다 ㅎㅎ

코딩일레븐님의 프로필 이미지
코딩일레븐
지식공유자

네엡 ^^ 

m22h님의 프로필 이미지
m22h

작성한 질문수

질문하기