마우스 이펙트 02

Life is like riding a bicycle. To keep your balance you must keep moving.

인생은 자전거를 타는 것과 같다. 균형을 잡으려면 움직여야 한다.

소스 보기

Javascript

HTML

CSS

const cursor = document.querySelector(".mouse__cursor");
const cursor2 = document.querySelector(".mouse__cursor2");
const span = document.querySelectorAll(".mouse__wrap span");
const menu = document.querySelectorAll("#header li a");
const modal = document.querySelector(".modal__btn");

window.addEventListener("mousemove", e => {
    // 커서 좌표값 할당
    // cursor.style.left = e.pageX -12 + "px";
    // cursor.style.top = e.pageY -12 + "px";
    // cursor2.style.left = e.pageX -15 + "px";
    // cursor2.style.top = e.pageY -15 + "px";

    //GSAP
    gsap.to(cursor, {duration: 0.1, left: e.pageX -12, top: e.pageY -12});
    gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});

    // 오버 효과
    // 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");
        });
    });

    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.addEventListener("mouseenter", () => {
        cursor.classList.add("active2");
        cursor2.classList.add("active2");
    });

    modal.addEventListener("mouseleave", () => {
        cursor.classList.remove("active");
        cursor2.classList.remove("active");
    });
    

    // span.forEach(function(){
    //     this.addEventListener("mouseenter", function(){});   //예전엔 함수를 이렇게 썼고 이때 this를 씀. 화살표함수에선 this를 못씀
    // });
});

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>
        <div class="mouse__wrap nanum">
            <p>
                <span class="style1">Life</span> is like riding a bicycle. To keep your <span class="style2">balance</span> you must keep <span class="style3">moving</span>.
            </p>
            <p>
                <span class="style4">인생은</span> 자전거를 타는 것과 같다. <span class="style5">균형을</span> 잡으려면 <span class="style6">움직여야</span> 한다.
            </p>
        </div>
    </section>
</main>

<>
/* 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 #fcaf16;
    color: #fcaf16;
}
@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: 10px;
    height: 10px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    user-select: none;
    pointer-events: none;
}
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 9998;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor.active {
    transform: scale(5);
    background: rgba(206, 149, 44, 0.4);
}
.mouse__cursor2.active {
    transform: scale(0);
}

.mouse__cursor.active2 {
    transform: scale(5);
    background: rgba(230, 228, 226, 0.4);
}
.mouse__cursor2.active2 {
    transform: scale(0);
}
</style>