mouseEffect04

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

const circle = document.querySelector(".cursor").getBoundingClientRect();		//클래스 cursor의 정보값 circle에 저장
document.querySelector(".mouse__img").addEventListener("mousemove", e => {		//클래스 mouse__img에 마우스 움직였을 때 이벤트 설정
    //커서
    gsap.to(".cursor", {duration: .2, left: e.pageX - circle.width/2, top: e.pageY - circle.height/2});		
    //gsap(자바스크립트 애니메이션 라이브러리)사용 0.2초동안 left: e의 pageX - circle의 가로 값/2, top: e의 pageY - circle의 세로 값/2

    //마우스 좌표 값
    let mousePageX = e.pageX;		//변수 mousePageX에 e의 X좌표 값 저장 
    let mousePageY = e.pageY;		//변수 mousePageY에 e의 Y좌표 값 저장

    //마우스 좌표 값을 기준점을 가운데로 초기화
    let centerPageX = window.innerWidth/2 -mousePageX;		//centerPageX에 (브라우저의 가로 값/2 - mousePageX)값 저장
    let centerPageY = window.innerHeight/2 -mousePageY;		//centerPageY에 (브라우저의 세로 값/2 - mousePageY)값 저장

    //이미지 움직이기
    gsap.to(".mouse__img figure img", {duration:0.3, x: -centerPageX/20, y: -centerPageY/20});		//gsap사용 0.3초동안 이미지를 (x: -centerPageX/20, y:-centerPageY/20)로 이동

    //출력
    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 값 출력
})