Mouse Effect03 - 조명효과

{
 // const circle1 = document.querySelector(".cursor").clientWidth;      //190 : border 빠진 상태 알려줌
        // const circle2 = document.querySelector(".cursor").offsetWidth      //200 : border 포함 상태 
        const circle = document.querySelector(".cursor").getBoundingClientRect();   //bottom, height, left, right, top, width, x, y
      

        console.log(circle.width)
        //gsap를 쓰면 css이름 그대로 쓸 수 있음 left에 x값 top에는 y값을 넣음
        function follow(e){
            
            gsap.to(".cursor", {duration: .3, left: e.pageX - circle.width/2,  top:e.pageY - circle.height/2});

            //출력용
            document.querySelector(".pageX").innerText = e.pageX;   //pageX값을 화면에 출력
            document.querySelector(".pageY").innerText = e.pageY;   //pageY값을 화면에 출력
        }
        window.addEventListener("mousemove", follow)    //마우스가 움직일때 함수가 실행 되도록 감싸줌
}