[자바스크립트 응용] 마우스 효과06_ 기울기 효과

마우스 효과 06

마우스 효과 여섯번째 시간입니다. 텍스트에 기울기 효과를 주고 오버시 글씨에 반전효과도 줘 보겠습니다.

---

원본 소스 보기 원본 사이트

---

■ n줄 요약

▶ 텍스트에 hover시, 마우스커서에 "mix-blend-mode : difference"를 주어 마우스포인터(원)이 겹치는 부분에 반전효과를 줄 수 있습니다.
텍스트는 skew를 주어 비틀기효과(≒기울기)를 줄 수 있고, "overflow:hidden"을 통해 마치 두개의 글씨가 이어져있지만 반반씩 달라보이는 효과를 줍니다.

HTML 소스

<div class="mouse__text">
    <div class="line">
        <div class="left">
            <div class="spanWrap">
                <span class="spanSlow">"i thought you would"</span>
            </div>
        </div>
        <div class="right">
            <div class="spanWrap">
                <span class="spanSlow">"i thought you would"</span>
            </div>
        </div>
    </div>
    <div class="line">
        <div class="left">
            <div class="spanWrap">
                <span class="spanFast">If you know please tell me in advance</span>
            </div>
        </div>
        <div class="right">
            <div class="spanWrap">
                <span class="spanFast">If you know please tell me in advance</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>

CSS 소스

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

JS 소스

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: .4, x: positionSlow });
    gsap.to(".spanFast", { duration: .4, x: -positionFast });
    gsap.to(".mouse__cursor", { duration: 0.3, left: e.pageX - 5, top: e.pageY - 5 });
};

window.addEventListener("mousemove", mouseMove);



const text = document.querySelectorAll(".spanSlow");
const text2 = document.querySelectorAll(".spanFast");
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");
    });
});

■ 핵심 찍먹하기🪓

✔ GSAP

CDN으로 항상 스크립트가져오셔야해요!
gsap.to ()에는 2가지 필수값이 필요합니다. 바로 대상과 속성입니다. 대상은 변수로 지정하지 않고, 위와 같이 선택자를 바로 지정할 수도 있습니다. 그렇다면 우리 소스에서는 어떻게 작동하는걸까요?
사용된 속성은 다음과 같습니다.

- duration : 애니메이션의 지속시간을 설정합니다. '.4'은 '0.4s'의 의미와 동일합니다.
- left: CSS에 left와 top값을 부여했었는데요. 이 값을 pageX,Y(문서 상단 경계 기준으로 좌표값 추출)만큼 이동시킵니다.

✔ mouseenter 사용

예전 글에서도 언급드렸는데, mouseover와 mouseenter는 마우스오버 이벤트이지만 조금 다른 이벤트값입니다. mouseover는 이벤트를 걸지않은 요소에 포인터를 갖다대도 이벤트가 발생하는 반면, mouseenter는 오로지 자기자신에게만 포인터가 와야 이벤트가 발생하는 차이점이 있습니다. 그러므로 우리는 mouseenter를 사용해야겠죠?

✔ skew와 overflow 이용하기

이번글에는 특별히 html소스와 css소스를 둘 다 언급했는데요. 저희가 원하는 텍스트 효과는 글씨가 기울어짐과 이 기울어진 글씨가 서로 이어져 하나의 글씨처럼 보이게 하기 위한 효과죠.
1. 기울어짐 효과는 비틀기효과인 skew를 이용합니다.
 말이 비틀기이지 사실은 기울기 효과에요. 문법은 다음과 같습니다
  skew(X축의 기울기 각도, Y축의 기울기 각도)
2. overflow:hidden을 이용하기
 잘 아시는 overflow:hidden입니다. 동일한 텍스트를 두번 반복시킨 뒤 width값을 반반씩 지정해준 뒤 영역밖으로 벗어나면 hidden으로 안보이게 해준다면? 저희가 원하는 효과를 만들 수 있습니다.

---

🙇‍♀️ 틀린 점에 대한 지적은 언제나 환영합니다 🙇‍♂️