[CSS/JS] cursor follower 만들기

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.