Mouse Effect - 따라다니기2

설명

마우스 좌표값에 따라 동그라미원의 좌표값이 변경되면서 마우스를 따라다니게 됩니다.
추가적으로 특정한 언어(span태그로 감싼 단어)에 마우스가 오버 됐을 경우에는 마우스를 따라다니는 원이 변하도록 효과를 넣었습니다.

 

<script>
const cursor = document.querySelector(".cursor");
const follower = document.querySelector(".cursor-follower");
    
window.addEventListener("mousemove", e => {
	gsap.to(cursor, {duration: .3, left: e.pageX -5, top: e.pageY - 5})
    gsap.to(follower, {duration: .8, left: e.pageX -15, top: e.pageY - 15})

	//오버효과
    document.querySelectorAll(".mouse__wrap span").forEach(span => {
    	span.addEventListener("mouseover", () => {
        cursor.classList.add("active");
        follower.classList.add("active");
    	})
    	span.addEventListener("mouseleave", () => {
    	cursor.classList.remove("active")
        follower.classList.remove("active")
    	})
    })
    document.querySelector("h1 a").addEventListener("mouseenter", () => {
    	cursor.classList.add("show1")
        follower.classList.add("show1")
        })
    document.querySelector("h1 a").addEventListener("mouseleave", () => {
    	cursor.classList.remove("show1")
        follower.classList.remove("show1")
    })

	document.querySelectorAll("li a").forEach((el,i) => {
    	el.addEventListener("mouseover", () => {
        	cursor.classList.add("show" + (i+1))
            follower.classList.add("show" + (i+1))
        })
        el.addEventListener("mouseout", () => {
        	cursor.classList.remove("show"+ (i+1))
            follower.classList.remove("show" + (i+1))
        })
    })

	//출력
    document.querySelector(".pageX").innerText = e.pageX;
    document.querySelector(".pageY").innerText = e.pageY;
});
</script>