독창적인 웹사이트로 상을 받은 awdagency.com 사이트에서 커서 모션 애니메이션이 눈에 띄어 따라 만들어봤어요. 커서 모션 뿐만아니라 스크롤 이동과 페이지간 이동에도 흥미로운 볼거리가 많답니

독창적인 웹사이트로 상을 받은 awdagency.com 사이트에서 커서 모션 애니메이션이 눈에 띄어 따라 만들어봤어요. 커서 모션 뿐만아니라 스크롤 이동과 페이지간 이동에도 흥미로운 볼거리가 많답니다. 🤩 마우스 커서를 반박자 느리게 따라가는 모션을 구현하고 그 과정을 작성했어요! 간단히 요약하면, 기존 커서는 css 로 가리고 mousemove 이벤트로 커스텀 커서가 마우스 위치를 따라가게 했어요. 이때 커스텀 커서는 position을 absolute로 주어야 브라우저 화면 상에서 위치 조정이 편리하답니다. 반박자 느린 커서의 꼬리는 requestAnimationFrame 함수와 약간의 수학적 계산을 더해주면 완성됩니다.😏