[Vanilla JS] Animation Mouse cursor (Covid-19)

 

JavaScript를 공부하면서 코딩 실력을 키우기 위해 작업하였습니다.

오늘은 코로나 19 사태를 위하는 마음으로 애니메이션을 이용한 간단한 코딩 작업을 하겠습니다.

 

 

 

 

 

 

 

body를 viewport 잡고 mousemove시, eyeball값을 이벤트 처리합니다.

function eyeball()이라는 함수를 만듭니다.

변수 eye에 forEach 함수를 사용하여 x, y값을 지정합니다.

Element.getBoundingClientRect() 메서드는 요소의 크기와 뷰포트를 기준으로 한 위치를 반환합니다.

event.pageX or event.pageY의 값들을 변수 x, y을 빼주어 

 

마지막으로 style에 transform: rotate를 주어 mouse move 할 때마다 eye가 따라가는 style을 만들 수 있습니다.

https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

Element.getBoundingClientRect()

https://developer.mozilla.org/en-US/docs/Web/API/MouseEvent/pageX

MouseEvent.pageX

 

MouseEvent로 X, Y값을 정하는 방법을 알아보았습니다.