마우스 이펙트 02

마우스 이펙트02

마우스의 위치값 표시 , 특정 글자에 갖대 대면 애니메이션 이 나온다.

원본 소스 보기

원본 페이지 보기

---

HTML

&ltsection id="mouseType"&gt
    &ltdiv class="mouse__cursor"&gt&lt/div&gt
    &ltdiv class="mouse__wrap"&gt
        &ltp&gtThe &ltspan class="style1"&gtfuture&lt/span&gt &ltspan class="style2"&gtdepends&lt/span&gt on What we
            do in the&ltspan class="style3"&gt present.&lt/span&gt
        &lt/p&gt
        &ltp&gt&ltspan class="style4"&gt미래&lt/span&gt는 현재 &ltspan class="style5"&gt우리가&lt/span&gt 무엇을 &ltspan
                class="style6"&gt하는가에&lt/span&gt 달려있다.&lt/p&gt
    &lt/div&gt
&lt/section&gt

---

CSS

 /* mouseType */
        .mouse__wrap {
            width: 100%;
            height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
            overflow: hidden;
            flex-direction: column;
            cursor: none;
        }

        .mouse__wrap p {
            font-size: 2vw;
            line-height: 2;
            font-weight: 300;
        }

        .mouse__wrap p:last-child {
            font-size: 3vw;
            font-weight: 300;
        }

        .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, opactiy 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, opactiy 0.2s;
        }

        .mouse__cursor.active {
            transform: scale(0);
        }

        .mouse__cursor2.active {
            transform: scale(5);
            background: rgba(255, 166, 0, 0.6);
        }

        .mouse__cursor.active2 {
        transform: scale(0);
       }
       .mouse__cursor2.active2 {
        transform: scale(3);
        background: rgba(255, 166, 0, 0.6);
       }

       .mouse__cursor.active3 {
        transform: scale(0);
       }
       .mouse__cursor2.active3 {
        transform: scale(3);
        background: rgba(255, 166, 0, 0.6);
       }

---

 

 const cursor = document.querySelector(".mouse__cursor");
        const cursor2 = document.querySelector(".mouse__cursor2");
        const span = document.querySelectorAll(".mouse__wrap span");
        const menu = document.querySelectorAll("#header")
        const modal = document.querySelectorAll(".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 });

            // 오버 효과 (화살표함수에는 this가 안먹힌다.)
            // 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 오버
             menu.forEach(menu => {
                menu.addEventListener("mouseenter", () => {
                    cursor.classList.add("active2");
                    cursor2.classList.add("active2");
                });
                menu.addEventListener("mouseleave", () => {
                    cursor.classList.remove("active2");
                    cursor2.classList.remove("active2");
                });
                
            });

            //소스보기 오버
            modal.forEach(modal => {
                modal.addEventListener("mouseenter", () => {
                    cursor.classList.add("active3");
                    cursor2.classList.add("active3");
                });
                modal.addEventListener("mouseleave", () => {
                    cursor.classList.remove("active3");
                    cursor2.classList.remove("active3");
                });
                
            });
        });