mouse 01

마우스 이펙트 01 (마우스 따라다니기)

이번에는 마우스에 효과를 넣은 이펙트를 코딩해봤습니다.

HTML

HTML은 기본적인 섹션안에 div 클래스를 잡아줍니다.

코드 보기

    <main id="main">
        <section id="mouseType">
            <div class="mouse__cursor"></div>
            <div class="mouse__wrap">
                <p>There's no <span class="style1">more</span> <span class="style2">excuse</span> than what you <span class="style3">don't do.</span></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>

CSS

css는 기본적인 형태와 스타일을 잡아주지만, 이미지 개개인에 nth-child를 이용해여 개별 구역을 잡아줍니다.
또한, z-index를 사용하여 각 위치를 잡아줍니다.

코드 보기

    /* mouseType */
    .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.25s,
            border-color 0.25s,
            transform 0.6s,
            border-radius 0.6s
        ;
    }
    .mouse__cursor.style1 {
        background-color: #dddddd30;
        border-color: #b0aaff;
    }
    .mouse__cursor.style2 {
        background-color: #dddddd30;
        border-color: #7671c5;
        transform: scale(1.3) rotateY(720deg);
    }
    .mouse__cursor.style3 {
        background-color: #dddddd30;
        border-color: #514c91;
        transform: scale(1.3) rotateX(720deg);
    }
    .mouse__cursor.style4 {
        background-color: #dddddd30;
        border-color: #5e5b88;
        transform: scale(5);
    }
    .mouse__cursor.style5 {
        background-color: #dddddd30;
        border-color: #352f88;
        transform: scale(0.5);
    }
    .mouse__cursor.style6 {
        background-color: #dddddd30;
        border-color: #554af0;
        border-radius: 0;
        transform: scale(3);
    }
    .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 #666;
            color: #b0aaff;
        }
    @media(max-width: 800px) {
        .mouse__wrap p {
            padding: 0 20px;
            font-size: 20px;
            line-height: 1.5;
            text-align: center;
            margin-bottom: 10px;
        }
        .mouse__wrap p:last-child {
            font-size: 40px;
            line-height: 1.2;
            text-align: center;
            word-break: keep-all;
        }
    }

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

script

마우스 커서에 각 좌표 값을 지정해주는 메서드와 마우스 커서에 지정해준 스타일을 작용해주기 위한 attr를 사용했습니다.

코드 보기

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

코드 원본 보기

결과물

원본 사이트 보기