mouseeffect04 - 이미지 효과

  const circle3 = document.querySelector(".cursor").getBoundingClientRect();  //bottom: 200, height: 200, left: 0, right: 200, top: 0, width: 200, x: 0, y: 0

document.querySelector(".mouse__img").addEventListener("mousemove", (e) =>{
    //커서
    gsap.to(".cursor", {duration: .2, left: e.pageX - circle3.width/2, top: e.pageY - circle3.height/2})

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

    
    //전체 가로값
    //innerWidth = 1920     브라우저크기
    //outerWidth = 1920
    // window.screen.width = 1920   화면 크기
    // window.screen.heigth = 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)"

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