마우스 이펙트 만들기 01

마우스 이펙트

자바스크립트를 이용한 마우스 효과 만들기 입니다.

---

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

마우스 커서에 따라 위치를 지정하거나 효과를 주는 방법입니다.

---

▶ HTML 파트

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <p>
                What <span class="style1">we</span> have to do is to be <span class="style2">forever</span> curiously testing <span class="style3">new</span> opinions and courting new impressions.
            </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 파트

/* mouseType */
    #mouseType {}
    .mouse__cursor {}
    .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: 500;
    }
    .mouse__wrap p:last-child {
        font-size: 2.2vw;
        font-weight: 400;
    }
    .mouse__wrap p span {
        border-bottom: 0.15vw dashed #cdff06;
        color: #cdff06;
    }
    @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.3;
            text-align: center;
            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.3);
        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: rgb(205, 255, 5, 0.3);
        border-color: #cdff06;
    }
    .mouse__cursor.style2 {
        background-color: rgb(107, 255, 9, 0.3);
        border-color: rgb(107, 255, 9);
        transform: scale(2) rotateY(720deg);
    }
    .mouse__cursor.style3 {
        background-color: rgb(9, 255, 111, 0.3);
        border-color: rgb(9, 255, 111);
        transform: scale(1.5) rotateX(720deg);
    }
    .mouse__cursor.style4 {
        background-color: rgb(9, 255, 234, 0.3);
        border-color: rgb(9, 255, 234);
        transform: scale(10);
    }
    .mouse__cursor.style5 {
        background-color: rgb(9, 157, 255, 0.3);
        border-color: rgb(9, 157, 255);
        border-radius: 0;
        transform: scale(1.5);
    }
    .mouse__cursor.style6 {
        background-color: rgb(103, 9, 255, 0.3);
        border-color: rgb(103, 9, 255);
        transform: scaleX(1.6) skew(45deg) rotateX(720deg); 
        border-radius: 10px;
    }
    .mouse__info {
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: #fff;
    }

▶ JAVASCRIPT 파트

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";   //단위를 붙여줘야 실행 됨 (-25는 커서의 위치를 원 가운데로 위치하게 함)
    cursor.style.top = e.clientY - 25 + "px";
});

const style = document.querySelectorAll(".mouse__wrap span");

style.forEach((span) => {   
    let attr = span.getAttribute("class");      //getAttribute : 클래스 속성값 가져옴

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

※위치 출력 속성

client : 브라우저 기준 좌표 값
offset : 요소 기준 좌표 값
page : 페이지 기준 좌표 값
screenY : 디바이스 기준 좌표 값

위치를 출력해주는 이벤트 속성을 통해 마우스 커서의 좌표값을 나타낼 수 있습니다.

또한 이 좌표 값을 활용하면 커서의 좌표값에 따른 다양한 효과를 넣을 수 있는 응용 방식을 알 수 있습니다.

원본 소스 보기