javascript

09. 요소 속성 : 크기 및 위치 : element.getBoundingClientRect : 요소의 크기 및 위치 값

마우스 커서 요소의 크기와 위치 정보를 얻고, 마우스 이동 이벤트를 감지하여 마우스 커서를 따라 이동시킵니다.

{
    // 선택자
        const mouseCursor = document.querySelector(".mouse__cursor");
        const rect = mouseCursor.getBoundingClientRect();

        window.addEventListener("mousemove", e => {
            gsap.to(".mouse__cursor", {
                duration : 0.5,
                // left : e.pageX - mouseCursor.clientWidth/2,
                // top : e.pageY - mouseCursor.clientHeight/2
                left : e.pageX - rect.width/2,
                top : e.pageY - rect.height/2
            });
        });

        console.log(rect);
}

mouseCursor 요소의 크기와 위치 정보를 rect 변수에 저장합니다.
mousemove 이벤트를 window 객체에 추가하여 마우스 이동을 감지합니다.
GSAP의 gsap.to() 메서드를 사용하여 마우스 커서 요소인 ".mouse__cursor"를 부드럽게 이동시킵니다.
e.pageX와 e.pageY는 마우스 이벤트의 현재 페이지 내 위치를 나타냅니다.
left와 top 속성을 사용하여 마우스 커서를 이동시킵니다. rect.width와 rect.height를 사용하여 마우스 커서 요소의 크기를 고려합니다.
duration은 이동 애니메이션의 지속 시간을 설정합니다.