마우스 이펙트 01

마우스 이펙트01

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

원본 소스 보기

원본 페이지 보기

---

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: 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.6,
            border-radius 0.3s;
    }

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

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

    .mouse__cursor.style3 {
        background-color: rgb(0, 47, 255, 0.4);
        border-color: rgb(0, 47, 255);
        transform: scale(1.5) rotateX(45deg);
    }

    .mouse__cursor.style4 {
        background-color: rgb(0., 47, 255, 0.4);
        border-color: rgb(0, 47, 255);
        transform: scale(10);
    }

    .mouse__cursor.style5 {
        background-color: rgb(255, 0, 85, 0.4);
        border-color: rgb(255, 0, 85);
        transform: scale(0.1);
    }

    .mouse__cursor.style6 {
        background-color: rgb(255, 81, 0, 0.4);
        border-color: rgb(255, 81, 0);
        border-radius: 0;
        transform: scale(5);
    }

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

---

 

//getAttribute()
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);
    })
});