Mouse Effect02 - 따라가기 효과2

안녕하세요

오늘은 마우스 따라가기 효과 2번째를 배웠습니다. 요리조리 잘 따라오는 커서가 너무 귀엽네요 ㅎㅎ

다들 포토플리오 만들때 참고하시면 좋을 것 같습니다. ^-^ 

 

const cursor = document.querySelector(".cursor");
const follower = document.querySelector(".cursor-follower");

window.addEventListener("mousemove", e => {
    //커서 좌표값 할당
    //  cursor.style.left = e.pageX + "px";
    //  cursor.style.top = e.pageY + "px";
    //  follower.style.left = e.pageX -10 + "px";
    //  follower.style.top = e.pageY -10 + "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 추가/ 나갔을때 active 삭제
    //mouseover, mouseenter, / mouseout, mouseleave / 이벤트 버블링
    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");
        });
    });   

    //오버 효과2
    document.querySelectorAll(".info").forEach(e =>{
        e.addEventListener("mouseover", ()=> {
            cursor.classList.add("show");
            follower.classList.add("show");
        });
        e.addEventListener("mouseleave", ()=> {
            cursor.classList.remove("show");
            follower.classList.remove("show");
        });
    });   

    //출력
    document.querySelector(".pageX").innerText = event.pageX; //전체 문서를 기준으로 수평 좌표
    document.querySelector(".pageY").innerText = event.pageX; //전체 문서를 기준으로 수직 좌표
})

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

마우스 이펙트