마우스 이펙트02

The road to success and the road to failure are almost exactly the same.

성공으로 가는 길과 실패로 가는 길을 거의 같다.

소스 보기

Javascript

GSAP

{
    // 선택자
    const mouseCursor = document.querySelector(".mouse__cursor");
    const mouseCursor2 = document.querySelector(".mouse__cursor2");

    window.addEventListener("mousemove", (e) => {
        mouseCursor.style.left = e.pageX + "px";
        mouseCursor.style.top = e.pageY + "px";
        mouseCursor2.style.left = e.pageX + "px";
        mouseCursor2.style.top = e.pageY + "px";
    });

    document.querySelectorAll(".mouse__text span").forEach(span => {
        span.addEventListener("mouseenter", () => {
            mouseCursor.classList.add("active");
            mouseCursor2.classList.add("active");
        })
        span.addEventListener("mouseleave", () => {
            mouseCursor.classList.remove("active");
            mouseCursor2.classList.remove("active");
        })
    })
}

{
    // 선택자
    const mouseCursor = document.querySelector(".mouse__cursor");
    const mouseCursor2 = document.querySelector(".mouse__cursor2");

    window.addEventListener("mousemove", (e) => {
        gsap.to(mouseCursor, {duration: 0.3, left: e.pageX-5, top: e.pageY-5});
        gsap.to(mouseCursor2, {duration: 0.8, left: e.pageX-20, top: e.pageY-20});
    });

    document.querySelectorAll(".mouse__text span").forEach(span => {
        span.addEventListener("mouseenter", () => {
            mouseCursor.classList.add("active");
            mouseCursor2.classList.add("active");
        })
        span.addEventListener("mouseleave", () => {
            mouseCursor.classList.remove("active");
            mouseCursor2.classList.remove("active");
        })
    })
}