mouseEffect02

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

const cursor = document.querySelector(".cursor");		//변수 cursor에 클래스 cursor 저장
const follower = document.querySelector(".cursor-follower");		//변수 follower에 클래스 cursor-follower 저장
const span = document.querySelectorAll(".mouse__wrap span");		//변수 span에 클래스 mouse__wrap의 span 태그들 저장
const info = document.querySelectorAll(".info");		//변수 info에 클래스 info 저장

window.addEventListener("mousemove", e => {		//브라우저에 마우스 움직였을 때 이벤트 설정
    //커서 좌표값 할당
    gsap.to(cursor, {duration: .3, left: e.pageX-5, top: e.pageY-5});	//gsap(자바스크립트 애니메이션 라이브러리)사용, 0.3초후 left: e(브라우저에서 마우스의 위치 좌표)의 x좌표-5, top: e의 y좌표-5 할당
    gsap.to(follower, {duration: .8, left: e.pageX-15, top: e.pageY-15});	//gsap사용, 0.3초후 left: e의 x좌표-5, top: e의 y좌표-5 할당

    //오버효과
    span.forEach(span => {								//span의 element값 span에 저장
        span.addEventListener("mouseenter", span => {	//span에 마우스가 들어갔을 때 이벤트 설정
            cursor.classList.add("active");					//cursor에 클래스 active 추가
            follower.classList.add("active");				//follower에 클래스 active 추가
        });
        span.addEventListener("mouseleave", span => {	//span에서 마우스가 떠났을 때 이벤트 설정
            cursor.classList.remove("active");				//cursor에 클래스 active 삭제
            follower.classList.remove("active");			//follower에 클래스 active 삭제
        });
    });

    info.forEach(span => {								//info의 element값 span에 저장
        span.addEventListener("mouseenter", span => {	//span에 마우스가 들어갔을 때 이벤트 설정
            cursor.classList.add("show");					//cursor에 클래스 show 추가
            follower.classList.add("show");					//follower에 클래스 show 추가
        });
        span.addEventListener("mouseleave", span => {	//span에서 마우스가 떠났을 때 이벤트 설정
            cursor.classList.remove("show");				//cursor에 클래스 show 삭제
            follower.classList.remove("show");				//follower에 클래스 show 삭제
        });
    });
});