mousemove) 마우스 커서 따라다니는 효과

안녕하세요 저는 찐망고이고

오늘은 마우스 커서를 따라다니는 이미지 효과를 만들어 볼건데요..

이벤트는 mousemove를 사용하고

좌표값을 알 수 있게 pageX와 pageY를 체크하시면 되요

 

작년 10월에 SELECTO COFFEE 웹사이트가 업데이트 되었는데..

https://www.selecto.co.kr/brand/main.asp

셀렉토커피

 

캡쳐이미지

 

요 귀여운 친구가

마우스   커서

마우스를 따라다니더라구요~~

 

머 아주 간단한 코드로 가능하니까 작업해볼께요

일단 이미지를 넣어야하는 요소가 필요하고 그 요소에 이미지를 담을거고

그친구를 mousemove이벤트를 이용하여 움직일겁니다.

 

// html

<div class="cursor">
    <img src="img/mouse-cursor.png">
</div>

 

// javascript

document.addEventListener('mousemove', (e) => {
    let mouseX = e.pageX + 10; // document의 x좌표값
    let mouseY = e.pageY + 10; // document의 y좌표값

    let cursor = document.querySelector('.cursor');
    cursor.style.left = mouseX + 'px';
    cursor.style.top = mouseY + 'px';
})

 

 

 

 

마우스가 잘 따라다니죠? style로 left값과 top을 이동하기때문에

css에 position꼭 넣어주셔야 해요~

 

 

See the Pen mousemove by 찐망고 (@nnwbliyz-the-styleful) on CodePen.