마우스 이펙트02

What we dwell on is who we become.

우리가 무슨 생각을 하느냐가 우리가 어떤 사람이 되는지를 결정한다.

소스보기

mouse__cursor(Javascript)

mouse__cursor(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";

      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");
        });
    });
}

{
    // 선택자
    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");
        });
    });
 }

{
   
 }

{
    
}