mouseEffect01

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

const style = document.querySelectorAll(".mouse__wrap span");		//변수 style에 클래스 mouse__wrap의 span태그들 저장
const cursor = document.querySelector(".cursor");		//변수 cursor에 클래스 cursor 저장
//마우스 움직이기
window.addEventListener("mousemove", e => {			//브라우저에 마우스를 움직였을 때 이벤트 설정
    let x = e.clientX-25 + "px";						//변수 x에 "e(마우스위치)의 x좌표-25px" 저장 
    let y = e.clientY-25 + "px";						//변수 y에 "e(마우스위치)의 y좌표-25px" 저장 
    cursor.style.cssText = `left: ${x}; top: ${y};`;	//cursor에 스타일 left: x; top: y; 출력
});

//마우스 효과
style.forEach((e, i) => {					//style의 element값을 e, index값을 i에 저장
    let attr = e.getAttribute("class");			//변수 attr에 e(클래스 mouse__wrap의 span태그)의 클래스 값을 저장
    e.addEventListener("mouseover", () => {	//e에 마우스를 움직였을 때 이벤트 설정
        cursor.classList.add(attr);				//cursor에 클래스 attr(span태그의 클래스 값) 추가
    });
    e.addEventListener("mouseout", () => {	//e에 마우스를 움직였을 때 이벤트 설정
        cursor.classList.remove(attr);			//cursor에 클래스 attr 삭제
    });
});