javascript

 

 

 

마우스를 방향에 따라 움직이는 오브젝트

 

웹을 돌아다니다 보면 마우스를 이동할때 마우스 방향으로 오브젝트가 실시간으로 바라보고는 하는데요. 나중에 도움이 되지 않을까 싶어서 자바스크립트로 구현해 보았습니다.

 

 

오브젝트는 CSS속성 transform: rotate를 사용하여 각도 조절을 통해 마우스가 있는 방향으로 움직이게 합니다.

 

 

See the Pen [JavaScript] 마우스를 따라가는 오브젝트 by junheeleeme (@junheeleeme) on CodePen.

 

 

 

 

 

target인 화살표의 중심좌표를 기준으로 마우스 좌표에 따라 각도를 구해서 마우스가 이동할때마다 값을 넣어줍니다. 각도를 구할 때는 두 점 사이의 절대각도를 구하는 아크탄젠트를 사용한다. 수학공부 열심히 할걸..

 

 

atan2 함수는 두 점 사이의 상대좌표(x, y)를 받아 절대각을 -π ~ π의 라디안 값으로 반환한다. atan2 함수는 파라미터로 음수를 허용하기 때문에 atan 함수 보다 더 유용하게 사용할 수 있다고 한다.

 

 

const target = document.querySelector(".target");
const center = {
    x : target.getBoundingClientRect().left + (target.clientWidth/2), // target 절대위치 중심 x값
    y : target.getBoundingClientRect().top + (target.clientHeight/2) // target 절대위치 중심 y값
}

window.addEventListener('mousemove', (e)=>{ //Event handler
    
    
    const x = center.x - e.clientX;  // 타겟 중심점 x값 - 마우스 위치 x값
    const y = center.y - e.clientY;  // 타겟 중심점 y값 - 마우스 위치 y값
    
    const radian = Math.atan2(y, x); // atan2함수
    const degree = (radian * 180 / Math.PI).toFixed(0);  // radian -> degree 변환
    
    target.style.transform = 'translate(-50%, -50%) rotate(' + degree + 'deg)'; //값 전달

})

 

 

객체 중심점 좌표와 마우스 좌표를 구하여 Math.atan2() 함수로 radian 값을 구한 후 degree로 변환해주면 마우스 방향에 해당하는 deg값을 알 수 있다.

 

 

저작자표시