Mouse Effect 02

Mouse Effect 02

마우스를 움직일 때마다, 따라다니는 원과 따라붙었을 때의 애니메이션과 특정 위치에 hover 할때 반응하는 이펙트를 공부해보았습니다.

01. HTML

이번에는 style를 딱히 지정해주지 않았습니다.

💀 HTML 코드

<main id="main">
    <section id="mouseType">
      <div class="mouse__cursor"></div>
      <div class="mouse__cursor2"></div>
      <div class="mouse__wrap">
        <p class="Nix"><span>Nature</span> never <span>deceives</span> us it is we who deceive <span>ourselves</span></p>
        <p class="arir"><span>자연</span>은 인간을 결코 <span>속이지 않는다.</span> 우리를 속이는 것은 항상 <span>우리 자신</span>이다.</p>
      </div>
    </section>
</main>

02. Css

기본 mouse와 따라붙는 mouse-sub 가 있으며, hover 등을 하였을 때 애니메이션을 주었습니다.

💀 css 코드

/* mouseType */
body::after {
    background:rgba(43, 37, 59, 0.651);
}
.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: 1.5vw;
    line-height: 2;
    font-weight: 300;
}

.mouse__wrap p:last-child {
    font-size: 1.8vw;
    font-weight: 500;
}

.mouse__wrap p span {
    border-bottom: 0.05vw solid rgb(219, 73, 146);
    color: rgb(219, 73, 146);
}


@media( max-width : 800px){
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 18px;
        line-height: 1.5;
        text-align: center;
        margin-bottom: 10px;
    }

    .mouse__wrap p:last-child {
        font-size: 24px;
        line-height: 1.5;
        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, 42, 219, 0.3);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opactiy 0.2s;
}

.mouse__cursor2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 9998;
    border-radius: 50%;
    background: rgba(255, 156, 230, 0.5);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opactiy 0.2s;
}

.mouse__cursor.active {
    transform: scale(0);
}
.mouse__cursor2.active {
    transform: scale(3);
    background: rgba(255, 42, 219, 0.3);
}

.mouse__cursor.show {
    transform: scale(0);
}
.mouse__cursor2.show {
    transform: scale(3);
    background: rgba(40, 169, 255, 0.3);
}

03. Javascript

GSPA를 사용하였으며, cursor의 오차를 줄여주거나, 특정 위치에 갔을 때 cursor가 반응하게 show를 붙여주는 역활도 하였습니다.

💀 Javascript 코드

const cursor = document.querySelector(".mouse__cursor")
const cursor2 = document.querySelector(".mouse__cursor2")
const span = document.querySelectorAll(".mouse__wrap span")
const header = document.querySelectorAll("#header")
const btn = document.querySelectorAll(".modal__wrap .modal__btn")

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

    // cursor2.style.left = e.pageX-15 + "px";
    // cursor2.style.top = e.pageY-15 + "px";

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


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

    //옛날 효과
    // span.forEach(function(){
    //   this.addEventListener("mouseenter", function(){});
    // })

    header.forEach( header => {
        header.addEventListener("mouseenter", ()=>{
        cursor.classList.add("active");
        cursor2.classList.add("active");
        });
        header.addEventListener("mouseleave", ()=>{
        cursor.classList.remove("active");
        cursor2.classList.remove("active");
        });
    })

    btn.forEach( btn => {
    btn.addEventListener("mouseenter", ()=>{
        cursor.classList.add("show");
        cursor2.classList.add("show");
        });
        btn.addEventListener("mouseleave", ()=>{
        cursor.classList.remove("show");
        cursor2.classList.remove("show");
        });
    })
})

원본 소스 보여주기

원본 사이트 보여주기