Mouse Effcet 04. 이미지 효과 / window.innerWidth,innerHeight

//설명. 참고사항.
const circle = document.querySelector(".cursor").getBoundingClientRect();   //커서의 길이 속성을 가져온다.
        
        //가운데 이미지 내에서 움직이는 함수 설정
        document.querySelector(".mouse__img").addEventListener("mousemove",(e)=>{
            //커서 움직이는 애니메이션를 gsap로 설정
            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.screenWidth  : 화면 크기
            //window.screenHeight  : 화면 크기

             //마우스 좌표값을 이미지 가운데로 초기화 
             //전체길이/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});   //gsap로 애니메이션 설정.
            // 좌하단 좌표 값 출력
            document.querySelector(".mousepageX").textContent = mousepageX;
            document.querySelector(".mousepageY").textContent = mousepageY;
            document.querySelector(".centerPageX").textContent = centerPageX;	//가운데 이미지 안에서의 좌표값
            document.querySelector(".centerPageY").textContent = centerPageY;	//가운데 이미지 안에서의 좌표값
            
            
        });

 

 

이번 예제는 가운데에 이미지가 있고  이미지 안에서 마우스를 움직이면 안에 있는 그림이 움직이는 이미지 효과 이펙트 예제 입니다. 

figure 태그안에 img 태그를 넣어서 작업했습니다. 

가운데 이미지 안에서의 좌표 값을 지정해주기위해

//전체 가로, 세로값

            //window.innerWidth 1920 : 브라우저 크기

            //window.outerWidth 1920 : 브라우저 전체 크기

            //window.screenWidth  : 화면 크기

            //window.screenHeight  : 화면 크기

             //마우스 좌표값을 이미지 가운데로 초기화

             //전체길이/2 - 마우스 x좌표값 == 0

             //가운데 이미지 안에서의 좌표값

            let centerPageX = window.innerWidth/2 - mousepageX;

            let centerPageY = window.innerHeight/2 - mousepageY;

전체 가로, 세로 크기값을 알아낸 뒤  전체 길이/2 - 마우스 좌표값을 0으로 만들어서 

이미지 안의 가운데 기준점이 (0,0)이 되도록 작업했습니다.