마우스를 따라다니며 빨간 박스가 자연스럽게 따라오는 것을 구현해보았다.
// 마우스 X,Y좌표를 제공해준다.
x = e.clientX;
y = e.clientY;
그리고 실시간으로 계속 반복되게 하는 함수를 만들어준다.
// 마우스를 따라 움직이는 속도를 제어해준다.
mx += (x - mx) * speed;
my += (y - my) * speed;
빨간 박스가 커서를 따라올 수 있도록 (즉, 박스가 커서가 되도록)
cursor_item.style.transform = "translate("+ mx +"px,"+ my +"px)"
브라우저에게 수행하기를 원하는 애니메이션을 알리고 다음 리페인트가 진행되기 전에 해당 애니메이션을 업데이트하는 함수를 호출
window.requestAnimationFrame(loop);