마우스 이펙트02 - 마우스 따라다니기(GSAP)

마우스 유형02

이번 유형은 1번 유형과 동일하지만 Gsap를 사용하여 작업하였습니다. gsap는 자바스크립트 라이브러리로 복잡한 애니메이션을 만들때 주로 사용한다.
자바스크립트로 만들었을때 보다 부드러워지는 경향도 있어서 작업해 보았습니다.

CSS

1번 유형과 차이점은 마우스 커서를 두가지를 만들어 동그라미 두개의 커서가 움직이도록 만들었습니다.
두가지 커서에 딜레이를 주어서 이중으로 움직이도록 하였습니다.

/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    overflow: hidden;
    cursor: none;
}

.mouse__wrap p {
    font-size: 2vw;
    line-height: 2;
    font-weight: 300;
}

.mouse__wrap p span {
    border-bottom: 0.15vw dashed rgb(0, 137, 250);
    color: rgb(0, 137, 250);
}

.mouse__wrap p:last-child {
    font-size: 3vw;
    font-weight: 400;
}

@media (max-width: 800px) {
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 20px;
        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: 10px;
    height: 10px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(255, 5, 5, 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: 9998;
    border-radius: 50%;
    background: rgba(17, 0, 255, 0.5);
    user-select: none; /* 선택이 되지 않도록 하였습니다.*/
    pointer-events: none; /* cursor2의 영역이 너무 넓기 때문에 클릭했을때 이벤트가 발생하지 않도록 하였습니다.*/
    transition: transform 0.3s, opacity 0.2s;
}
.mouse__cursor.active{
    transform: scale(0);
}
.mouse__cursor2.active{
    transform: scale(5);
    background: rgba(255,166,0,0.5);
}
.mouse__cursor.active li {
    transform: scale(5);
}
.mouse__cursor2.active li {
    transform: scale(10);
    background: rgba(11, 241, 49, 0.5);
}

HTML

이번에는 자바스크립트에서 span을 선택자로 지정하여 같은 애니메이션만 나올 수 있도록 하였습니다.

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>
        <div class="mouse__wrap">
            <p>
                It does not <span">matter</span> how slowly you go <span>as long as</span> you do <span>not stop.</span>
            </p>
            <p>
                <span>멈추지</span> 않는다면 얼마나 <span>천천히</span> 가느냐는 <span">중요하지 않다.</span>
            </p>
        </div>
    </section>
</main>

Javascript

gsap파일을 다운 받습니다.
마우스커서가 2가지이기 때문에 선택자를 각각 지정하고 상단메뉴와 명언에 각 지정한 글자에서 애니메이션 효과를 주었습니다.

const cursor = document.querySelector(".mouse__cursor"); //마우스 커서
const cursor2 = document.querySelector(".mouse__cursor2");  //마우스 커서2
const span = document.querySelectorAll(".mouse__wrap span"); //오버효과
const header = document.querySelectorAll("#header ul li");  //상단의 메뉴

window.addEventListener("mousemove", e => {  //마우스의 위치 값을 구하는 이벤트메서드 mousemove 
    //커서 좌표값 할당 넓이에 절반을 빼주면 가운데 위치한다.
    // 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를 사용하면 이런식으로 마우스커서의 위치를 구할 수 있습니다.
    gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top: e.pageY -5});
    gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top: e.pageY -15});

    //오버효과 
    //mouseenter / mouseover / 이벤트 버블링 
    span.forEach(span => {   //화살표함수는 this가 안먹힌다. 과거에는 function을 사용해서 할떄는 this가 먹힘
        span.addEventListener("mouseenter", () => {
            cursor.classList.add("active");
            cursor2.classList.add("active");

        });
        span.addEventListener("mouseleave", () => {
            cursor.classList.remove("active");
            cursor2.classList.remove("active");
        });
    });
    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");
        });
    });
});

결과

깃허브 소스 보기