Mouse Effect 06

마우스 이펙트

마우스 이펙트 여섯번째 시간입니다.

---

마우스 이펙트 06

오늘은 마우스 커서를 따라서 텍스트가 중앙을 기준으로 양쪽으로 왔다갔다 하는 텍스트 효과를 줘보겠습니다.
+ 텍스트에 커서를 갖다대면 커서크기가 커집니다.

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

01. 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_bg20@2x-min.jpg" alt="">
               </figure>
            </div>
        <div class="mouse__text">
            <div class="line">
                <div class="left">
                    <div class="spanWrap">
                        <div class="spanSlow span">Pain Past</div>
                    </div>
                </div>
                <div class="right">
                    <div class="spanWrap">
                        <div class="spanSlow span">Pain Past</div>
                    </div>
                </div>
            </div>
            <div class="line">
                <div class="left">
                    <div class="spanWrap">
                        <div class="spanFast span">is pleasure</div>
                    </div>
                </div>
                <div class="right">
                    <div class="spanWrap">
                        <div class="spanFast span">is pleasure</div>
                    </div>
                </div>
            </div>
            <div class="line">
                <div class="left">
                    <div class="spanWrap">
                        <div class="spanSlow span">지나간 고통은</div>
                    </div>
                </div>
                <div class="right">
                    <div class="spanWrap">
                        <div class="spanSlow span">지나간 고통은</div>
                    </div>
                </div>
            </div>
            <div class="line">
                <div class="left">
                    <div class="spanWrap">
                        <div class="spanFast span">쾌락이다.</div>
                    </div>
                </div>
                <div class="right">
                    <div class="spanWrap">
                        <div class="spanFast span">쾌락이다.</div>
                    </div>
                </div>
            </div>        
        </div>
        </div>
    </section>
</main>
} 

02. CSS 코드

좌우로 꾸며주고 커서에 반전효과를 줍니다.

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

03. script 코드

중심을 잡아주고 gsap를 이용해서 마우스를 움직일때 효과를 줍니다.

{
    const cursor = document.querySelector(".mouse__cursor");
    const span = document.querySelectorAll(".spanWrap .span");

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

    //  마우스 커서가 글씨 위에 올라가면 원의 크기는 5배 정도 크게 작업... 글씨 반전효과 추가
        window.addEventListener("mousemove",()=>{
            span.forEach(span => {
                span.addEventListener("mouseenter", () =>{
                    cursor.classList.add("active");
                });
                span.addEventListener("mouseleave", () =>{
                    cursor.classList.remove("active");
                });
            });
        })
}