mouseeffect05 - 이미지효과2

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

function mouseMove(e){

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

    //마우스 좌표 기준점을 가운데로 변경
    let centerPageX = window.innerWidth/2 - mousePageX
    let centerPageY = window.innerHeight/2 - mousePageY

    //최솟값은 -50 최댓값은 50
    let maxPageX = Math.max(-800, Math.min(800, centerPageX));
    let maxPageY = Math.max(-300, Math.min(300, centerPageY));

    //각도 줄이기 설정
    let anglexpageX = maxPageX * 0.12;
    let anglexpageY = maxPageY * 0.12;

    //부드럽게 설정 
    let softPageX = 0
    let softPageY = 0

    softPageX += (anglexpageX - softPageX) * 0.4
    softPageY += (anglexpageY - softPageY) * 0.4

    //이미지 움직이기
    // transform:  rotateX(0deg) rotateY(0deg);
    const imgMove = document.querySelector(".mouse__img");
    imgMove.style.transform = "perspective(600px) rotateX("+softPageY+"deg) rotateY("+-softPageX+"deg)";

    //원 크기
    let circleWidth = mousePageX-circle.width/2
    let circleHeight = mousePageY-circle.height/2

    //커서
    gsap.to(".cursor", {duration: .2, left: circleWidth, top: circleHeight})

    //출력
    document.querySelector(".mousePageX").textContent = mousePageX
    document.querySelector(".mousePageY").textContent = mousePageY;
    document.querySelector(".centerPageX").textContent = centerPageX;
    document.querySelector(".centerPageY").textContent = centerPageY;
    document.querySelector(".maxPageX").textContent = maxPageX;
    document.querySelector(".maxPageY").textContent = maxPageY;
    
}
document.addEventListener("mousemove", mouseMove)