Mouse Effect 02

마우스 이펙트

마우스 이펙트 두번째 시간입니다.
이번 시간에는 GSAP를 이용한 마우스 이펙트 대해 알아보겠습니다.

---

마우스 이펙트 02

1번 유형과 크게 달라진게 없으며 움직임이 더욱 부드러워졌습니다.
메뉴바와 메인단어와 소스 보기에 transform효과를 적용하였습니다.

원본 사이트 보기 원본 소스 보기

01. HTML 코드

{
    <header id="header">
    <h1>Javascript Mouse Effect02</h1>
    <p>마우스 이펙트 - 마우스 따라다니기(GSAP)</p>
    <ul>
        <li><a href="mouseEffect01.html">1</a></li>
        <li class="active"><a href="mouseEffect02.html">2</a></li>
        <li><a href="mouseEffect03.html">3</a></li>
        <li><a href="mouseEffect04.html">4</a></li>
        <li><a href="mouseEffect05.html">5</a></li>
        <li><a href="mouseEffect06.html">6</a></li>
        <li><a href="mouseEffect07.html">7</a></li>
    </ul>
</header>
<!-- //header -->
<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>
        <div class="mouse__wrap">
            <p>Better the <span class="style1">last smile </span>than the first laughter.</p>
            <p>처음의 큰 웃음보다 <span class="style2">마지막의 미소</span>가 더 좋다.</p>
        </div>
    </section>
</main>
} 

02. CSS 코드

{
    /* mouseType */
    .mouse__wrap {
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        overflow: hidden;
        cursor: none;
    }
    .mouse__wrap p {
        font-size: 2vw;
        line-height: 2;
        font-weight: 300;
    }
    .mouse__wrap p:last-child {
        font-size: 3vw;
        font-weight: 400;
    }
    .mouse__wrap p span {
        border-bottom: 0.15vw dashed orange;
        color: orange;
    }
    @media (max-width: 800px){
        .mouse__wrap p {
            padding: 0 20px;
            font-size: 24px;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 10px;
    }
        .mouse__wrap p:last-child {
            font-size: 40px;
            line-height: 1.5;
            text-align: center;
            word-break: keep-all;
    }
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 10px;
        height: 10px;
        z-index: 9999;
        border-radius: 50%;
        background: rgba(255,255,255,0.3);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;

    }
    .mouse__cursor2 {
        position: absolute;
        left: 0;
        top: 0;
        width: 30px;
        height: 30px;
        z-index: 9998;
        border-radius: 50%;
        background: rgba(255,255,255,0.5);
        user-select: none;
        pointer-events: none;
        transition: transform 0.3s, opacity 0.2s;
    }
    .mouse__cursor.active {
        transform: scale(0);
    }
    .mouse__cursor2.active {
        transform: scale(10);
        background: rgba(255,166,0,0.6);
    }
    .mouse__cursor.headeractive {
        transform: scale(0);
    }
    .mouse__cursor2.headeractive {
        transform: scale(10);
        background: rgba(20, 47, 225, 0.6);
    }
    .mouse__cursor.Btnactive {
        transform: scale(0);
    }
    .mouse__cursor2.Btnactive {
        transform: scale(10);
        background: rgba(212, 88, 231, 0.6);
    }
}

03. script 코드

mousemove 이벤트로 마우스 좌표를 구하고 커서를 따라다니게 합니다.
그 뒤에 mouseenter, mouseleave에 css효과를 입혀줍니다.

{
    <script src="../assets/js/gsap.min.js"></script>
    const cursor = document.querySelector(".mouse__cursor");
    const cursor2 = document.querySelector(".mouse__cursor2");
    const span = document.querySelectorAll(".mouse__wrap span");
    const header = document.querySelectorAll("#header > ul > li");
    const Btn = document.querySelector(".modal__btn");

    window.addEventListener("mousemove", e=>{
        // 커서 좌표값 할당
        // cursor.style.left = e.pageX -5 + "px";
        // cursor.style.top = e.pageY -5 + "px";
        // cursor2.style.left = e.pageX -15 + "px";
        // cursor2.style.top = e.pageY -15 + "px";

        // GSAP
        gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY - 5});
        gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY - 15});

        // 오버 효과
        // mouseenter / mouseover / 이벤트 버블링
        span.forEach(span => {
            span.addEventListener("mouseenter", () =>{
                cursor.classList.add("active");
                cursor2.classList.add("active");
            });
            span.addEventListener("mouseleave", () =>{
                cursor.classList.remove("active");
                cursor2.classList.remove("active");
            });
        });

        header.forEach(header =>{
            header.addEventListener("mouseenter", () =>{
                cursor.classList.add("headeractive");
                cursor2.classList.add("headeractive");
            });
            header.addEventListener("mouseleave", () =>{
                cursor.classList.remove("headeractive");
                cursor2.classList.remove("headeractive");
            });
        });

            Btn.addEventListener("mouseenter", () =>{
                cursor.classList.add("Btnactive");
                cursor2.classList.add("Btnactive");
            });
            Btn.addEventListener("mouseleave", () =>{
                cursor.classList.remove("Btnactive");
                cursor2.classList.remove("Btnactive");
            });
    });
}