[Project] clientX,Y와 offsetX,Y의 차이점

 

 

포트폴리오 사이트를 제작하면서 저를 소개하는 포토카드에 재미있는 이벤트를 넣어보았습니다.

 

마우스를 카드에 호버했을 때, 마우스위치를 실시간으로 추적하여 카드가 회전하는 이벤트입니다. 

 

 

처음 제작에 들어갔을 때, 저는 clientX, clientY를 사용하여 제작했습니다.

 

그 결과 원하는대로 카드가 회전하지않고 굉장히 큰 기준으로 회전 기준점이 잡혀있는 듯한 움직임을 보였습니다.

 

해결방법을 찾아보니 client X,Y 가 아닌 offset X,Y를 사용해야한다는 것을 알게 되었습니다.

 

그렇다면 두 X,Y는 어떤 차이를 가지고 있을까요??

 

 

 

offsetX,Y

offsetX는 이벤트가 발생한 요소의 왼쪽 상단을 기준으로 이벤트가 발생한 지점의 X 좌표를 나타냅니다.
offsetY는 이벤트가 발생한 요소의 왼쪽 상단을 기준으로 이벤트가 발생한 지점의 Y 좌표를 나타냅니다.
이는 이벤트가 발생한 요소 내에서의 상대적인 위치를 나타냅니다.

 

 

offsetXY를 사용하여 포토카드에 올라온 마우스의 상대위치를 추적하여 이벤트를 구현했을 때의 모습입니다.

 

offsetXY 사용

 

 

 

clientX,Y

 

 

clientX는 브라우저 창의 왼쪽 상단을 기준으로 이벤트가 발생한 지점의 X 좌표를 나타냅니다.
clientY는 브라우저 창의 왼쪽 상단을 기준으로 이벤트가 발생한 지점의 Y 좌표를 나타냅니다.
이는 브라우저 창 내에서의 상대적인 위치를 나타냅니다.

 

clientXY를 사용하여 브라우저에 올라온 마우스의 상대위치를 추적하여 이벤트를 구현했을 때의 모습입니다.

포토카드에 올라온 마우스 좌표가 기준이 아니고

브라우저에 올라온 마우스 좌표가 기준이기에 원하는 이벤트로 구현이 안됐습니다.

 

client X,Y 사용

 

 

 

정리

 

 

 

 clientX 및 clientY는 브라우저 창을 기준으로 하며, 

 

offsetX 및 offsetY는 이벤트가 발생한 요소를 기준으로 합니다. 

 

 

 

아래는 동일하게 카드의 우상단에 마우스를 올렸을 때 console에 찍히는 각 좌표값입니다.

offset 좌표 (이벤트 대상 기준)

client 좌표 (브라우저 화면 기준)

 

 

 

 

위와 같이 자신이 구현하려는 이벤트에 적합한 마우스 좌표를 사용하시면 되겠습니다!