마우스 이펙트_06 : 좌표에 따라 텍스트를 움직이고 포인터에 변화주기!

마우스 이펙트 만들기!

마우스 위치에 따라 이미지들이 좌우로 움직이고 텍스트에 마우스가 올라가면 커서가 커지는 효과를 만들어볼게요!

---

HTML 코드 : 뼈대

마우스 이펙트의 핵심은 cursor를 구성하는것이에요!
꼭 간단한 div를 통한 Cursor를 구성하도록 합시다!

<section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
        <div class="mouse__img">
            <figure>
                <img src="../../../assets/slider/effect_bg_01.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>

---

CSS 코드 : 살

1. 마우스가 이미지에 닿으면 반전이 되게끔 "mouse__cursor" 클래스에 "mix-blend-mode: difference;"를 설정해줍시다!
2. 화면을 절반으로 나눠 왼쪽에 오렌지 박스를 하나 만들어 놓습니다!

.mouse__wrap {
    color: #fff;
    height: 100vh;
    width: 100%;
    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 0.25s;
}

---

JS 코드 : 좌표 값을 통한 원근감 효과 및 커서 구성하기

저는 최대한 간단하게 설명만 가능하므로 비교적 전문적인 용어는 배제한 형태로 설명해볼게요!

0. 마우스의 좌표는 내부 창 너비를 절반으로 나눠 중심을 구한 뒤 각각 속도 조절을 위해 slow는 0.1을 곱하고 fast는 0.2를 곱합니다.
1. gsap를 이용해서 .spanSlow/Fast 클래스를 가진 요소에 마우스 좌표값에 따라 변화를 줍니다!
2. spanWrap span에 마우스가 들어오고 나갈때 효과를 주기위해서 forEach를 통해 선택해
3. 각각의 요소에 마우스가 들어올경우 .mouse__cursor 요소의 크기를 변형시킵니다!

//마우스 움직임 및 커서 설정
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 -5, top: e.pageY -5});
}
window.addEventListener("mousemove", mouseMove)


//마우스 진입/아웃시 적용할 효과
const spanWrap = document.querySelectorAll(".spanWrap span");
spanWrap.forEach((e,i)=>{
    e.addEventListener("mouseenter", ()=>{
        document.querySelector(".mouse__cursor").style.transform="scale(3.5)"
    })
    e.addEventListener("mouseleave", ()=>{
        document.querySelector(".mouse__cursor").style.transform="scale(1)"
    })
})

---

완성!

내일은 금요일 과연 집에 갈 수 있을까요...?

---

원본 소스 보기

원본 페이지 보기