MouesEffect - gsap 사용

	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";
            // follow.style.left = e.pageX -15 + "px";
            // follow.style.top = e.pageY -15 + "px";
            
            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});

            //오버 효과
            //span 오버 했을 때 클래스 active 추가 / 나갔을 때 acitve삭제
            //mouseover,mouseenter / mouseout, mouseleave 차이점,이벤트 버블링
            document.querySelectorAll(".mouse__wrap span").forEach(e => {
                e.addEventListener("mouseenter", ()=>{
                    cursor.classList.add("active")
                    follower.classList.add("active")
                })
                e.addEventListener("mouseleave", ()=>{
                    cursor.classList.remove("active")
                    follower.classList.remove("active")
                })
            });

            document.querySelectorAll(".info > div").forEach(e => {
                e.addEventListener("mouseenter", ()=>{
                    cursor.classList.add("show")
                    follower.classList.add("show")
                })
                e.addEventListener("mouseleave", ()=>{
                    cursor.classList.remove("show")
                    follower.classList.remove("show")
                })
            });

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

 

자바스크립트를 이용하여 마우스 효과(mouse effect)를 주는 사이트 입니다.

좌표값은 브라우저기준인 pageX,pageY만 사용하였고,

gsap을 이용하여 스크립트만을 사용했을 때 보다 더 부드러운 효과를 표현하였습니다.

 

마우스 이펙트

\