자바스크립트 마우스 효과 : 텍스트 효과

자바스크립트 : 마우스 효과 : 텍스트 효과

자바스크립트의 다양한 효과들 중, 마우스 효과입니다. 이번에는 이미지 위에 기울어진 형태의 텍스트를 만들고, 마우스를 움직일 때마다 텍스트가 움직이도록 텍스트 효과를 작업해 보도록 하겠습니다.

---

1. HTML 소스

1-1) 텍스트 상자 만들기

<div class="mouse__text">
    <div class="line">
        <div class="left">
            <div class="spanWrap">
                <span class="spanSlow">Pain Fast</span>
            </div>
        </div>
        <div class="right">
            <div class="spanWrap">
                <span class="spanSlow">Pain Fast</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>

오늘은 HTML의 구조도 중요하기 때문에 함께 살펴보겠습니다. 텍스트 상자는 하나처럼 보이지만, 사실은 다른 각도로 기울어진 두 개의 상자가 있고, 두 상자가 만나는 지점 이후로는 overflow: hidden 속성을 사용하여 숨겨준 것입니다.
총 네 줄의 텍스트를 작성할 것이기 때문에 line 박스를 네 개 만들어 줍니다. 그 안에는 각각 left, right 박스를 만들어 줍니다. 그 안에 span으로 텍스트가 들어가 있는 구조입니다.

2. CSS 소스

2-1) text box

.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;
}

텍스트 상자들을 만들었다면 CSS 속성을 적용해 줍니다.
transform: skew 속성은 요소의 경사를 변형시킬 때 사용합니다. left, right 박스에 각각 적용시켜 줍니다. 요소를 벗어나는 부분은 overflow: hidden을 사용하여 숨겨줍니다.

2-2) cursor

.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 0.3s;
}
.mouse__cursor.active {
    transform: scale(5);
}

마우스 커서에도 스타일을 적용해 줍니다. 크기가 20px인 원 모양으로 만들어주고, mix-blend-mode: difference 속성을 사용하여 이미지에 마우스를 오버했을 때 색상이 변화하는 반전 효과도 부여해 주었습니다. active 클래스는 텍스트 위에 마우스를 오버했을 때, 반전 효과가 더 잘 나타나게끔 크기를 5배 키우기 위해 작업해 주었습니다.

3. JAVASCRIPT 소스

3-1) mousemove 이벤트 만들기

const mouseMove = (e) => {
    let positionSlow = (e.pageX - window.innerWidth / 2) * 0.1;
    let positionFast = (e.pageX - window.innerWidth / 2) * 0.2;

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

먼저, mousemove 이벤트를 만들어 줍니다. positionSlow, positionFast 변수는 이미지의 움직임 정도를 결정합니다. 텍스트가 이미지 영역을 벗어나지 않도록, window.innerWidth / 2만큼을 빼 주었습니다. Slow는 살짝 느리게, Fast는 살짝 빠르게 움직이도록 각각 0.1, 0.2를 곱해 주었습니다.
이후, gsap를 사용하여 부드럽게 움직이도록 만들어 줍니다. 마우스 커서의 움직임도 함께 작업해 주었습니다. 10을 빼는 이유는 마우스 커서의 크기가 20px, 20px이기 때문입니다.

3-2) mouseenter 이벤트 만들기

const text = document.querySelectorAll(".spanSlow");
const text2 = document.querySelectorAll(".spanFast");

이제 텍스트 위에 마우스를 오버하면 마우스가 커지도록 작업해 봅시다. 각각의 텍스트를 먼저 선택해 줍니다. spanSlow, spanFast는 각각 4개씩 존재하므로, querySelectorAll을 사용해야 합니다.

text.forEach((e) => {
    e.addEventListener("mouseenter", () => {
        document.querySelector(".mouse__cursor").classList.add("active");
    });
    e.addEventListener("mouseleave", () => {
        document.querySelector(".mouse__cursor").classList.remove("active");
    });
});
text2.forEach((e) => {
    e.addEventListener("mouseenter", () => {
        document.querySelector(".mouse__cursor").classList.add("active");
    });
    e.addEventListener("mouseleave", () => {
        document.querySelector(".mouse__cursor").classList.remove("active");
    });
});

querySelectorAll을 사용했기 때문에, forEach문으로 작업해 줍니다. text를 각각 선택하고, addEventListener로 mouseenter, mouseleave 이벤트를 만들어 줍니다.
마우스가 텍스트 위에 위치했을 때(mouseenter)는 커서에 active(transform: scale(5)) 클래스를 추가해 주고,
마우스가 텍스트를 벗어났을 때(mouseleave)는 커서에 active 클래스를 제거해 주면 됩니다.

---

결과

원본 소스 보기 원본 사이트 보기