mouseEffect 02

스크립트를 이용한 마우스효과 만들기 02

마우스 이펙트02에서는 GSAP를 이용하여 애니메이션 효과를 부드럽게 나타내는 것 까지 함께 해 보도록 합시다.

원본 소스 보기

선택자 만들기

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

Javascript & GSAP

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.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 => 이벤트 버블링 ,자식의 이벤트 효과 여부

    //오버 효과 - 화살표 함수를 쓰기전에는 this를 썼음, 화살표함수에서는 this가 적용되지 않음
    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");
        });
    });
    btn.addEventListener("mouseenter", () => {
        cursor.classList.add("active");
        cursor2.classList.add("active");
    });
    btn.addEventListener("mouseleave", () => {
        cursor.classList.remove("active");
        cursor2.classList.remove("active");
    });
    header.addEventListener("mouseenter", () => {
        cursor.classList.add("active");
        cursor2.classList.add("active");
    });
    header.addEventListener("mouseleave", () => {
        cursor.classList.remove("active");
        cursor2.classList.remove("active");
    });
});

<script src="../assets/js/gsap.min.js"></script>
GSAP를 사용하기 전에 GSAP의 파일을 저장하고 연동시켜 줍니다.

추가적으로 푸터의 소스보기 버튼과 헤더영역에 마우스가 들어 갔을때 같은 효과를 추가 해 주었습니다.

HTML

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__cursor2"></div>
        <div class="mouse__wrap">
            <p>
                <span>Success</span> is walking from failure
                to failure with no loss of <span>enthusiasm</span>.
            </p>
            <p>
                성공이란 <span>열정을</span> 
                잃지 않고 실패에서 실패로 <span>걸어가는</span> 것이다.
            </p>
        </div>
    </section>
</main>

CSS

css보기

.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: 300;
}
.mouse__wrap p:last-child {
    font-size: 3vw;
    font-weight: 400;
}
.mouse__wrap p span {
    border-bottom: 0.15vw dashed #ee7213;
    color: #ee7213;
}
@media (max-width: 800px) {
    .mouse__wrap p {
        padding: 0 20px;
        font-size: 30px;
        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,255,255,0.6);
    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: 9999;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opactiy 0.3s;
}
.mouse__cursor.active {
    transform: scale(0);
}
.mouse__cursor2.active {
    transform: scale(4);
    background: rgba(255,166,0,0.6);
}