EFFECT | MOUSE | 마우스 따라다니기

mouseEffect | 마우스 따라다니기

오늘의 목표
👉🏻 마우스 커서 대신 css로 디자인한 모양이 마우스를 따라다니도록 설정하기
👉🏻 강조하고 싶은 글자에 커서를 가져갔을 떄 다양한 효과주기

---

1. 사이트 구조 살펴보기

CSS 살펴보기

<style>
    /* mouseType */
    .mouse__wrap {
        /* vw하면 스크롤 생김 */
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: none;
        /* 두줄효과 */
        flex-direction: column;
        color: #fff;
        overflow: hidden;
    }

    .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 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;
            word-break: keep-all;
        }
    }

    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 50px;
        height: 50px;
        border-radius: 50%;
        border: 3px solid #fff;
        background-color: rgba(255, 255, 255, 0.1);
        /* 선택이나 클릭이 되지 않도록 */
        user-select: none;
        pointer-events: none;
        transition:
            background-color 0.3s,
            border-color 0.3s,
            transform 0.6s,
            border-radius 0.3s;
    }

    .mouse__cursor.style1 {
        background-color: rgba(255, 165, 0, 0.4);
        border-color: orange;
    }

    .mouse__cursor.style2 {
        background-color: rgba(255, 247, 0, 0.4);
        border-color: rgb(251, 255, 0);
        transform: scale(2) rotateY(720deg);
    }

    .mouse__cursor.style3 {
        background-color: rgba(0, 166, 255, 0.4);
        border-color: rgb(0, 136, 255);
    }

    .mouse__cursor.style4 {
        background-color: rgba(255, 0, 170, 0.4);
        border-color: rgb(255, 0, 234);
    }

    .mouse__cursor.style5 {
        background-color: rgba(0, 255, 145, 0.4);
        border-color: rgb(0, 255, 115);
        transform: scale(1.5) rotateX(390deg);
    }

    .mouse__cursor.style6 {
        background-color: rgba(255, 0, 0, 0.4);
        border-color: rgb(255, 0, 0);
        border-radius: 10%;
        transform: scale(2) skew(40deg);
    }

    .mouse__info {
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: #fff;
    }
</style>

HTML 살펴보기

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <p>
                You <span class="style1">can't</span> be <span class="style2">more than</span> others if you
                <span class="style3">do like</span> others
            </p>
            <p><span class="style4">남과 같이</span> 해서는 <span class="style5">남 이상</span>이 될 수 <span
                    class="style6">없다.</span></p>
        </div>
    </section>

    <div class="mouse__info">
        <ul>
            <li>clientX : <span class="clientX">0</span>px</li>
            <li>clientY : <span class="clientY">0</span>px</li>
            <li>offsetX : <span class="offsetX">0</span>px</li>
            <li>offsetY : <span class="offsetY">0</span>px</li>
            <li>pageX : <span class="pageX">0</span>px</li>
            <li>pageY : <span class="pageY">0</span>px</li>
            <li>screenX : <span class="screenX">0</span>px</li>
            <li>screenY : <span class="screenY">0</span>px</li>
        </ul>
    </div>
</main>

2. script 살펴보기

<script>
    window.addEventListener("mousemove", (event) => {
        document.querySelector(".clientX").innerText = event.clientX;
        document.querySelector(".clientY").innerText = event.clientY;
        document.querySelector(".offsetX").innerText = event.offsetX;
        document.querySelector(".offsetY").innerText = event.offsetY;
        document.querySelector(".pageX").innerText = event.pageX;
        document.querySelector(".pageY").innerText = event.pageY;
        document.querySelector(".screenX").innerText = event.screenX;
        document.querySelector(".screenY").innerText = event.screenY;
    });

    const cursor = document.querySelector(".mouse__cursor");

    window.addEventListener("mousemove", (e) => {
        cursor.style.left = e.clientX - 25 + "px";
        cursor.style.top = e.clientY - 25 + "px";
    });

    // document.querySelector(".style1").addEventListener("mouseover", () => {
    //     cursor.classList.add("style1");
    // });

    // document.querySelector(".style1").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style1");
    // });

    // document.querySelector(".style2").addEventListener("mouseover", () => {
    //     cursor.classList.add("style2");
    // });

    // document.querySelector(".style2").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style2");
    // });

    // document.querySelector(".style3").addEventListener("mouseover", () => {
    //     cursor.classList.add("style3");
    // });

    // document.querySelector(".style3").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style3");
    // });

    // document.querySelector(".style4").addEventListener("mouseover", () => {
    //     cursor.classList.add("style4");
    // });

    // document.querySelector(".style4").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style4");
    // });

    // document.querySelector(".style5").addEventListener("mouseover", () => {
    //     cursor.classList.add("style5");
    // });

    // document.querySelector(".style5").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style5");
    // });

    // document.querySelector(".style6").addEventListener("mouseover", () => {
    //     cursor.classList.add("style6");
    // });

    // document.querySelector(".style6").addEventListener("mouseout", () => {
    //     cursor.classList.remove("style6");
    // });

    // for문
    // for (let i = 1; i <= 6; i++) {
    //     document.querySelector(".style" + i).addEventListener("mouseover", () => {
    //         cursor.classList.add("style" + i);
    //     });
    // }
    // for (let i = 1; i <= 6; i++) {
    //     document.querySelector(".style" + i).addEventListener("mouseout", () => {
    //         cursor.classList.remove("style" + i);
    //     });
    // }

    // const num = [1, 2, 3, 4, 5, 6]

    // num.forEach((el) => {
    //     document.querySelector(".style" + [el]).addEventListener("mouseover", () => {
    //         cursor.classList.add("style" + [el]);
    //     });
    // });

    // num.forEach((el) => {
    //     document.querySelector(".style" + [el]).addEventListener("mouseout", () => {
    //         cursor.classList.remove("style" + [el]);
    //     });
    // });

    // forEach문
    // document.querySelectorAll(".mouse__wrap span").forEach((span, num) => {
    //     span.addEventListener("mouseover", () => {
    //         cursor.classList.add("style" + (num + 1));
    //     });

    //     span.addEventListener("mouseout", () => {
    //         cursor.classList.remove("style" + (num + 1));
    //     });
    // });

    // innerText / textContent span 안에 글자 바꾸고 싶을때
    // getAttribute span 안에 속성을 가지고 온다
    document.querySelectorAll(".mouse__wrap span").forEach((span) => {
        let attr = span.getAttribute("class");

        span.addEventListener("mouseover", () => {
            cursor.classList.add(attr);
        });

        span.addEventListener("mouseout", () => {
            cursor.classList.remove(attr);
        });
    });
</script>

원본 소스 보기

실제 사이트 보기