[JavaScript]mousemove(code)

---

See the Pen MWJqPzQ by minsucoding (@minsucoding) on CodePen.

 

 

오늘 설명 드릴 내용은 mousemove 핸들러를 활용한 이벤트입니다

예제를 보시면 아시겠지만 아주 간단하게 만든만큼 보완해야될 점 또한 많이 보입니다

 

 

---

 

 

우선 가장 포인트는 JS에서 client 좌표를 받아와야 하는 부분입니다

마우스가 어디에 위치 해있는지를 모르면 ball을 어디에 위치 해야하는지 모르기 때문이죠

마우스가 위치한 좌표값을 바로 top,left값으로 할당을 해주면 마우스를 따라가게 되겠죠~

여기까지는 쉽게 이해가 되시겠지만 그냥 스크립트에서 주게 되면 ball자체는 viewport기준 좌측상단으로 가려는 성질이 있기 때문에 마우스를 따라오지 못합니다

 

 

그래서 CSS에서 position을 absolute를 주어야지만 따라다닐수 있게 됩니다

이제 absolute를 이용해서 ball에 위치를 원하는 위치로 설정해주면 이번 시간에 하는 이벤트는 끝이 나게됩니다~

 

부족한 부분은 더 보완해주시고 나중에 정보 공유 부탁드립니다~~ㅎㅎ

 

 

---