03. 마우스 이펙트 : 조명 효과 / getBoundingClientRect()

        hljs.highlightAll(); //외부 스크립트 함수 (highlight)호출
        modal(); //외부 스크립트 함수 (modal, 소스보기 창)호출
        tabMenu(); //외부 스크립트 함수 (tabMenu, 소스보기의 탭 메뉴)호출

        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함수 실행
       
       // highlight();
        // modal();
        // tabMenu();
       
        // // const cursor1 = document.querySelector(".cursor").clientWidth  //190 : border 빠진 상태
        // // const cursor2 = document.querySelector(".cursor").offsetWidth //200  : border 포함 상태
        // const circle3 = document.querySelector(".cursor").getBoundingClientRect(); //bottom, height, left, right, top, w,y

        // // const cursor3 = {
        // //     bottom : 0, 
        // //     height : 200, 
        // //     left : 0, 
        // //     width : 200
        // // }

        // function follower(e) {
            
        //     //gsap
        //     gsap.to(".cursor", {duration: .3, left: e.pageX - circle.width/2, top: e.pageY  - circle.height/2 });

        //     //출력용
        //     document.querySelector(".pageX").innerText = e.pageX
        //     document.querySelector(".pageY").innerText = e.pageY
        // }
        // window.addEventListener("mousemove",follow);

마우스이펙트03 사이트