04.마우스 이펙트 - 이미지 효과(1)

        // highlight();
        // modal();
        // tabMenu();

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

        document.querySelector(".mouse__img").addEventListener("mousemove", (e) => { 
            //커서 - 이미지 안에서만 움직임(.mouse__img | 전체는 window로 설정)
            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.outerWidth; //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으로 표현
            gsap.to(".mouse__img figure img", {duration: 0.3, x: centerpageX/20,  y:centerpageY/20});


            //출력(마우스 좌표값)
            document.querySelector(".pageX").textContent = mousePageX;
            document.querySelector(".pageY").textContent = mousePageY;
            document.querySelector(".centerpageX").textContent = centerpageY;
            document.querySelector(".centerpageY").textContent = centerpageY;
        })

마우스이펙트04 사이트