Mouse Effect 04 - 이미지 효과

{
  const circle = document.querySelector(".cursor").getBoundingClientRect(); 

            document.querySelector(".mouse__img").addEventListener("mousemove", (e)=>{      //이미지안에서만 마우스 움직이게함
            //커서
            gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2,  top:e.pageY - circle.height/2});     

            //마우스 좌표 값
            let mousePageX = e.pageX;
            let mousePageY = e.pageY;

            //전체가로
            //window.innerWidth 1920    //브라우저 크기
            //window.outeWidth 1920 //브라우저 크기
            //window.screen.width 1920      //화면크기
            //window.screen.height 1080     //화면크기

            //마우스 좌표 값을 가운데 초기화
            //전체 길이/2 - 마우스 x좌표== 0
            let centerPageX = window.innerWidth/2 - mousePageX;
            let centerPageY = window.innerHeight/2 - mousePageY;

            //이미지 움직이기
            // const imgMove = document.querySelector(".mouse__img figure img")
            // imgMove.style.transform = "translate("+ centerPageX/20 +"px,"+centerPageY/20 +"px)"

            gsap.to(".mouse__img figure img", {duration:0.3, x:centerPageX/20, y: centerPageY/20});

            //출력
            // document.querySelector(".pageX").textContent = centerPageX
            // document.querySelector(".pageY").textContent = centerPageY

            document.querySelector(".mousePageX").textContent = mousePageX; //화면에 출력
            document.querySelector(".mousePageY").textContent = mousePageY;
            document.querySelector(".centerPageX").textContent = centerPageX;
            document.querySelector(".centerPageY").textContent = centerPageY;
            })
}