Mouse Effect05 - 이미지효과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;

    //최소값을 -100 최대값을 100 설정
    let maxPageX = Math.max(-100, Math.min(100, centerPageX));
    let maxPageY = Math.max(-100, Math.min(100, centerPageY));

    //각도 줄이는 설정
    let anlexPageX = maxPageX * 0.3;
    let anlexPageY = maxPageY * 0.1;

    //부드럽게 설정 10-->30
    let softPageX = 0;
    let softPageY = 0;
    softPageX += anlexPageX * 0.4;
    softPageY += anlexPageY * 0.4;

    //이미지 움직이기
    const imgNove = document.querySelector(".mouse__img")
    imgNove.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: 0.3, 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.querySelector(".anlexPageX").textContent = anlexPageX;
    document.querySelector(".anlexPageY").textContent = anlexPageY;
    document.querySelector(".softPageX").textContent = softPageX;
    document.querySelector(".softPageY").textContent = softPageY;
}
document.addEventListener("mousemove", mouseMove);

• js로 css 제어하기
• gsap
• pageX
• pageY
• getBoundingClientRect
• Math.max / Math.max
• textContent