EFFECT | MOUSE | 텍스트 효과

mouseEffect | 텍스트 효과

오늘의 목표
👉🏻 마우스 커서 움직임에 따라 글자가 접혀서 움직이는 듯한 효과주기
👉🏻 글자에 마우스 커서를 올리면 커서가 확대되면서 글자 반전 효과주기

---

1. 사이트 구조 살펴보기

HTML 살펴보기

글자를 왼쪽과 오른쪽 부분으로 나눠 구조를 짜주었습니다.

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <div class="mouse__img">
                <figure>
                    <img src="../assets/img/effect_bg03@2x-min.jpg" alt="">
                </figure>
            </div>
            <div class="mouse__text">
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanSlow">Pain Past</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanSlow">Pain Past</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanFast">is pleasure</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanFast">is pleasure</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanSlow">지나간 고통은</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanSlow">지나간 고통은</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanFast">쾌락이다.</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanFast">쾌락이다.</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</main>

CSS 살펴보기

shew 속성과 overflow 속성을 사용하여 글자가 접혀서 나오는 듯한 효과를 주었습니다.

<style>
    /* mouseType */
    .mouse__wrap {
        color: #fff;
        width: 100%;
        height: 100vh;
        cursor: none;
    }
    .mouse__img {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        z-index: -1;
    }
    .mouse__text {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -20%);
        font-size: 3vw;
        line-height: 1.5;
    }
    .mouse__text .line {
        width: 100%;
        display: flex;
    }
    .mouse__text .line .left {
        width: 50vw;
        color: orange;
        overflow: hidden;
        transform: skew(0deg, -15deg);
    }
    .mouse__text .line .left .spanWrap{
        width: 100vw;
        text-align: center;
    }
    .mouse__text .line .right {
        width: 50vw;
        overflow: hidden;
        transform: skew(0deg, 15deg);
    }
    .mouse__text .line .right .spanWrap {
        width: 100vw;
        text-align: center;
        transform: translateX(-50vw);
    }
    .mouse__text span {
        display: inline-block;
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        z-index: 9999;
        border-radius: 50%;
        background-color: rgba(255,255,255,0.9);
        user-select: none;
        pointer-events: none;
        mix-blend-mode: difference;
        transition: transform .3s;
    }
    .mouse__cursor.big {
        transform: scale(5);
    }
</style>

2. script 살펴보기

📌 글씨의 움직임과 cursor 설정하기

마우스 커서의 pageX, pageY을 구하고 window.innerWidth의 절반 값을 빼서 텍스트가 이미지를 벗어나지 않도록 설정해주었습니다.
positionSlow는 좀 더 느리게 0.1을 곱해주었고 positionFast는 조금 더 빠르게 나타내기 위해 0.2를 곱해주었습니다.
cursor는 gsap를 활용하여 부드럽게 설정해주었습니다. spanFast의 경우 반대방향으로 움직일 수 있도록 -positionFast 값을 넣어주었습니다.

📌 글씨에 커서를 올렸을 때 커서의 크기를 5배로, 글씨는 반전 효과주기

우선 글씨인 spanSlow와 spanFast를 선택자로 만들어주고 여러개이므로 forEach문을 활용해 addEventListener를 설정해줍니다.

<script>
    const cursor = document.querySelector(".mouse__cursor");
    const textSlow = document.querySelectorAll(".spanSlow");
    const textFast = document.querySelectorAll(".spanFast");

    const mouseMove = (e) => {
        // 이질감 주기 위해 0.1 곱하기
        let positionSlow = (e.pageX - (window.innerWidth / 2)) * 0.1;
        let positionFast = (e.pageX - (window.innerWidth / 2)) * 0.2;

        gsap.to(".spanSlow", {duration: .4, x:positionSlow});
        gsap.to(".spanFast", {duration: .4, x:-positionFast});
        gsap.to(".mouse__cursor", {duration: .3, left: e.pageX -5, top: e.pageY -5});
    }
    window.addEventListener("mousemove", mouseMove);

    // 마우스 커서가 글씨 위에 올라가면 크기는 5배 크게, 글씨 반전 효과 추가
    textSlow.forEach((text) => {
        text.addEventListener("mouseover", () => {
            cursor.classList.add("big");
        });
        text.addEventListener("mouseout", () => {
            cursor.classList.remove("big");
        });
    });
    textFast.forEach((text) => {
        text.addEventListener("mouseover", () => {
            cursor.classList.add("big");
        });
        text.addEventListener("mouseout", () => {
            cursor.classList.remove("big");
        });
    });
</script>

원본 소스 보기

실제 사이트 보기