mouseEffect03

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

const circle = document.querySelector(".cursor").getBoundingClientRect();  //변수 circle에 클래스 cursor의 정보 저장
//circle = {bottom: 200, height: 200, left: 0, right: 200, top: 0, width: 200, x: 0, y: 0}

function follow(e){			//함수 follow를 매개변수 e로 선언

    gsap.to(".cursor", {duration: .3, left: e.pageX-(circle.width/2), top: e.pageY-(circle.height/2)});		
    //gsap(자바스크립트 애니메이션 라이브러리)사용, 0.3초후 클래스 cursor에 left: e의 x좌표-(circle의 width값/2), top: e의 y좌표-(circle의 height값/2) 할당

    //출력용
    document.querySelector(".pageX").innerHTML = e.pageX;	//클래스 pageX에 e의 x좌표값 출력
    document.querySelector(".pageY").innerHTML = e.pageY;	//클래스 pageY에 e의 y좌표값 출력
};
	
window.addEventListener("mousemove", follow)	//브라우저에 마우스 움직였을 때 함수 follow실행