Mouse Effect 02 - 따라다니기2

const cursor = document.querySelector(".cursor");		// 커서
    const follower = document.querySelector(".cursor-follower");		// 커서를 따라다니는 요소

    window.addEventListener("mousemove", e => {			// 화면에 마우스 오버했을 때
        // cursor.style.left = (e.pageX - 5) + "px"				// 커서 중앙에 요소가 오도록 위치값 조정
        // cursor.style.top = (e.pageY - 5)+ "px"

        // follower.style.left = (e.pageX - 15) + "px"
        // follower.style.top = (e.pageY - 15) + "px"

        gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});		// gsap효과로 변환
        gsap.to(follower, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});

        document.querySelectorAll(".mouse__wrap span").forEach(e => {		// span처리 된 요소들
            e.addEventListener("mouseover", ()=>{							// span처리 된 요소들에 마우스오버 했을 때
                cursor.classList.add("active")									// active 추가/삭제
                follower.classList.add("active")
            })
            e.addEventListener("mouseout", ()=>{
                cursor.classList.remove("active")
                follower.classList.remove("active")
            })
        })
        document.querySelector(".info .title").addEventListener("mouseover", ()=>{		// title에 마우스 오버
            cursor.classList.add("show")
            follower.classList.add("show")
        })
        document.querySelector(".info .title").addEventListener("mouseout", ()=>{
            cursor.classList.remove("show")
            follower.classList.remove("show")
        })
        document.querySelector(".info .number").addEventListener("mouseover", ()=>{		// number에 마우스 오버
            cursor.classList.add("show1")
            follower.classList.add("show1")
        })
        document.querySelector(".info .number").addEventListener("mouseout", ()=>{
            cursor.classList.remove("show1")
            follower.classList.remove("show1")
        })
        document.querySelector(".info .source-btn").addEventListener("mouseover", ()=>{		// 소스보기 버튼에 마우스 오버
            cursor.classList.add("show2")
            follower.classList.add("show2")
        })
        document.querySelector(".info .source-btn").addEventListener("mouseout", ()=>{
            cursor.classList.remove("show2")
            follower.classList.remove("show2")
        })

        // 좌표값 출력
        document.querySelector(".pageX").innerText = e.pageX
        document.querySelector(".pageY").innerText = e.pageY
    })

전체 사이트 보기

자바스크립트로 마우스 효과(mouse effect)를 주는 두번째 예제입니다.

gsap을 이용하여 애니메이션 효과를 더욱 역동적으로 표현했습니다.