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;//세로 가운데로     

    //좌표의 최대값  최소값  구하기
    //centerPage 좌표 값이 800이상으로 넘어가지 않도록 설정.
    //max 값에 Math.min을 한번 더 사용해서  centerPage의 값이 아무리 커져도 Math.min의 최소값이 나오도록 설정.
    let maxPageX = Math.max(-800, Math.min(800, centerPageX));
    let maxPageY = Math.max(-300, Math.min(300, centerPageY));

    //각도 줄이는 설정
    let anlexpageX = maxPageX * 0.12;
    let anlexpageY = maxPageY * 0.12;

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

    softPageX += (anlexpageX - softPageX) * 0.4;
    softPageY += (anlexpageY - 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: .3, left: circleWidth, top: circleHeight});//gsap로 마우스 움직이는 애니메이션 설정.
    
    //좌하단에 좌표값 출력
    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);

 

마우스 이펙트