마우스 이펙트

Energy and persistence conquer all things

기운과 끈기는 모든 것을 이겨낸다.

Source

JAVASCRIPT

HTML

CSS

//선택자
const cursor = document.querySelector(".mouse__cursor"); //첫번째 커서
const cursor2 = document.querySelector(".mouse__cursor2"); //2번째 커서
const span = document.querySelectorAll(".mouse__wrap span"); //오버 효과
const menu = document.querySelectorAll("#header ul li"); // 메뉴 선택
const srcBtn = document.querySelectorAll(".modal__btn"); //소스보기 버튼 선택

//마우스가 윈도우 브라우저 내에서 움직일 경우 이벤트 발생시키기 (e는 마우스 요소를 의미)
window.addEventListener("mousemove", e => {
    // GSAP
    // 마우스 이벤트가 좀 더 부드럽고 섬세하게 작동되도록 함
    gsap.to(cursor, {duration: 0.15, left: e.pageX -5, top: e.pageY -5});
    gsap.to(cursor2, {duration: 0.5, left: e.pageX -15, top: e.pageY -15});

    //오버효과(화살표 함수 사용 : 화살표 함수에서는 this가 먹히지 않는다.
    // 즉 this를 쓰기 위해선 옛날 문법으로 짜야한다.(펑션)
    //mouseenter / mouseover => 자식요소에게 영향을 주는가 즉 이벤트 버블링에 차이가 있다.
    span.forEach(span => {
        //마우스가 영역 안으로 들어올 때 active 붙이기
        span.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active");
        });
        //마우스가 영역에서 떠났을 때
        span.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active");
        });   
    });

    //EventTarget으로 변수를 사용하여 메뉴와 소스보기에도 효과 주기
    menu.forEach(menu => {
        menu.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active");
        });
        menu.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active");
        });
    });
    //소스보기
    srcBtn.forEach(srcBtn => {
        srcBtn.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active");
        });
        srcBtn.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active");
        });
    });
});

<header id="header">
    <h1>Javascript Mouse Effect02</h1>
    <p>마우스 이펙트 - 마우스 따라다니기(GSAP)</p>
    <ul>
      <li><a href="mouseEffect01.html">1</a></li>
      <li class="active"><a href="mouseEffect02.html">2</a></li>
      <li><a href="mouseEffect03.html">3</a></li>
      <li><a href="mouseEffect04.html">4</a></li>
      <li><a href="mouseEffect05.html">5</a></li>
      <li><a href="mouseEffect06.html">6</a></li>
      <li><a href="mouseEffect07.html">7</a></li>
    </ul>
</header>
<!-- //header -->

<main id="main">
    <section id="mouseType01">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>
        <div class="mouse__wrap">
            <p><span class="style1">Energy</span> and <span>persistence</span> conquer all things</p>
            <p><span>기운</span>과 <span>끈기</span>는 모든 것을 이겨낸다.</p>
        </div>
    </section>

</main>

/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;  /* vw를 사용하면 스크롤이 생기므로vh로 작업 */
    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: 200;
}
.mouse__wrap p:last-child {
    font-size: 3vw;
    font-weight: 300;
}
.mouse__wrap p span {
    padding-bottom: 3px;
    border-bottom: 0.1vw solid #e7ad00;
    color: #e7ad00;
}

@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 */
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(79, 42, 225, 0.3);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(79, 42, 225, 0.5);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s;
}

.mouse__cursor.active {
    transform: scale(0);
}
.mouse__cursor2.active {
    transform: scale(5);
    background: rgba(79, 42, 225, 0.5);
}