Mouse Effect - 조명 효과

function follow(e){
    // const circle1 = document.querySelector(".cursor").clientWidth;  //190 : border값 빠진 상태
    // const circle2 = document.querySelector(".cursor").offsetWidth;  //200 : border값 포함 상태
    const circle3 = document.querySelector(".cursor").getBoundingClientRect();  //bottom, height, left, right, top, width, x(좌표값), y(좌표값)

    // console.log(circle1);
    // console.log(circle2);
    // console.log(circle3);
    
    //div.cursor를 마우스 정 가운데로 위치시킨다.
    gsap.to(".cursor", {duration: .3, left: e.pageX - (circle3.width / 2), top: e.pageY - (circle3.height / 2)});

    //출력용
    document.querySelector(".pageX").innerText = e.pageX;
    document.querySelector(".pageY").innerText = e.pageY;
}

window.addEventListener("mousemove", follow);   //mousemove이벤트 발생 시 follow함수 실행

 

마우스 조명효과 사이트