mouseEffect05

https://garenchoi.github.io/webs_class/javascript/effect/mouseEffect05.html

const circle = document.querySelector(".cursor").getBoundingClientRect(); 	//변수 circle에 클래스 cursor의 정보 값 저장

function mouseMove(e){		//함수 mouseMove 매개변수 e로 선언
    let mousePageX = e.pageX;	//mousePageX에 e의 pageX(X좌표 값)저장
    let mousePageY = e.pageY;	//mousePageY에 e의 pageY(Y좌표 값)저장
    
    //마우스 좌표 기준점을 가운데로 변경
    let centerPageX = window.innerWidth/2 - mousePageX;		//centerPageX에 (브라우저의 가로 값/2 - mousePageX값) 저장
    let centerPageY = window.innerHeight/2 - mousePageY;	//centerPageY에 (브라우저의 세로 값/2 - mousePageY값) 저장

    let maxPageX = Math.max(-800, Math.min(800, centerPageX));		//변수 maxPageX에 centerPageX값(최솟값 -800, 최댓값 800으로) 저장
    let maxPageY = Math.max(-300, Math.min(300, centerPageY));		//변수 maxPageY에 centerPageY값(최솟값 -300, 최댓값 300으로) 저장

    //각도 줄이는 설정					
    let anglePageX = maxPageX * 0.12;		//anglePageX에 maxPageX * 0.12값 저장
    let anglePageY = maxPageY * 0.12;		//anglePageY에 maxPageY * 0.12값 저장

    //부드럽게 설정
    let softPageX = 0; let softPageY = 0;			//변수 softPageX, softPageY 선언
    softPageX += (anglePageX - softPageX) * 0.4;	//softPageX (anglePageX - softPageX) * 0.4 값 추가
    softPageY += (anglePageY - softPageY) * 0.4;	//softPageY (anglePageY - softPageY) * 0.4 값 추가

    //이미지 움직이기
    const imgMove = document.querySelector(".mouse__img");		//변수 imgMove에 클래스 mouse__img 저장
    imgMove.style.transform = `perspective(600px) rotateX(${softPageY}deg) rotateY(${-softPageX}deg)`;		//imgMove에 스타일 transform perspective(600px) rotateX(softPageYdeg) rotateY(-softPageXdeg) 추가

    //원 크기
    let circleWidth = mousePageX-circle.width/2;		//변수 circleWidth에 mousePageX - circle.width/2 값 저장
    let circleHeight = mousePageY-circle.height/2;		//변수 circleHeight에 mousePageY - circle.height/2 값 저장

    //커서
    gsap.to(".cursor", {duration: .3, left: circleWidth, top: circleHeight})	//gsap(자바스크립트 애니메이션 라이브러리)사용, 클래스 cursor에 0.3초 동안 left: circleWidth, top: circleHeight값 할당

    //출력
    document.querySelector(".mousePageX").textContent = mousePageX;		//클래스 mousePageX에 mousePageX 값 출력
    document.querySelector(".mousePageY").textContent = mousePageY;		//클래스 mousePageY에 mousePageY 값 출력
    document.querySelector(".centerPageX").textContent = centerPageX;	//클래스 centerPageX에 centerPageX 값 출력
    document.querySelector(".centerPageY").textContent = centerPageY;	//클래스 centerPageY에 centerPageY 값 출력
    document.querySelector(".maxPageX").textContent = maxPageX;			//클래스 maxPageX에 maxPageX 값 출력
    document.querySelector(".maxPageY").textContent = maxPageY;			//클래스 maxPageY에 maxPageY 값 출력
}

document.addEventListener("mousemove", mouseMove);		//마우스 움직였을 때 함수 mouseMove 실행