728x90
js로 커서 팔로워를 만들 수 있다.
먼저 html에 cursor 클래스 div 태그를 생성한다.
<div class="cursor"></div>
css로 팔로워를 꾸민다. 나는 분홍색 원으로 만들었다.
.cursor {
z-index: 100000;
position: absolute;
width: 15px;
height: 15px;
background-color: rosybrown;
border-radius: 50%;
pointer-events: none;
transition: transform 0.15s ease;
transform: scale(1);
}
mouse_follower.js
document.addEventListener("DOMContentLoaded", function () {
const cursor_follower = document.querySelector(".cursor");
let cursorX = 0;
let cursorY = 0;
let mouseX = 0;
let mouseY = 0;
const speed = 0.5;
function animateCursor() {
const dx = mouseX - cursorX;
const dy = mouseY - cursorY;
cursorX += dx * speed;
cursorY += dy * speed;
cursor_follower.style.left = cursorX -10 + "px";
cursor_follower.style.top = cursorY -10+ "px";
requestAnimationFrame(animateCursor);
}
document.addEventListener("mousemove", function (event) {
mouseX = event.clientX;
mouseY = event.clientY + window.scrollY;
});
animateCursor();
});
animateCursor(): 마우스 커서를 따라 이동하는 애니메이션을 구현. 커서를 따라오는 속도와 위치를 지정
mousemove: 마우스가 움직일 때마다 mouseX와 mouseY 변수를 업데이트한다. mouseY는 window.scrollY를 함께 더해 스크롤할 때도 위치를 계산한다.
See the Pen mouse follower by aki (@aki-builder) on CodePen.
728x90
'Frontend > HTML\CSS' 카테고리의 다른 글
[CSS] 스크롤바 커스텀하기(-webkit-scrollbar) (1) | 2024.05.01 |
---|