마우스 이펙트 - 텍스트 효과

마우스 효과

마우스 이펙트 - 텍스트 효과

마우스 커서를 따라서 글씨가 가운데에서 양옆으로 색상이 바뀌고 글씨에 마우스가 올라가면 크기가 커지면서 반전효과를 주어보겠습니다.

---

결과

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

---

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_bg17.jpg" alt="이미지">
                </figure>
            </div>  
            <div class="mouse__text">
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanSlow">I'm still hungry</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanSlow">I'm still hungry</span>
                        </div>                        
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanFast">bab jo jae bal</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanFast">bab jo jae bal</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 작성

이미지를 가운데에 넣어주고, 커서를 20,20px로 조그마하게 원으로 만들었습니다. 커서에 active 클래스가 추가되면 마우스 반전과 크기가 5배로 커지도록 만들어줍니다.글씨는 가운데에서 겹쳐주고 왼쪽은 주황 글씨가 보이도록, 오른쪽은 흰색 글씨가 보이도록 설정합니다.

소스 보기

/* mouseType */
.mouse__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    font-display: column;
    color: #fff;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    cursor: none;
}
.mouse__img {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    will-change: transform;
}
.mouse__img figcaption {
    position: absolute;
    left: 50%;
    top: 50%;
    font-size: 1vw;
    line-height: 1.6;
    transform: translate3d(-50%, -50%, 100px);
    padding: 1vw;
    white-space: nowrap;
    text-align: center;
    background: rgba(0,0,0,0.4);
}
.mouse__wrap figure {
    width: 40vw;
}
.mouse__wrap figure::before {
    content: '';
    position: absolute;
    left: 5%;
    bottom: -30px;
    width: 90%;
    height: 40px;
    background: url(../assets/img/effect_bg14.jpg) center no-repeat;
    background-size: 100% 40%;
    filter: blur(15px) grayscale(50%);
    z-index: -1;
}
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: #fff;
    z-index: 1000;
    pointer-events: none;
    user-select: none;
    mix-blend-mode: difference;
}
.mouse__info {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}

JS 작성

스크립트는 어렵지 않습니다. 마우스 움직였을 때 값에 따라서 가운데 글씨가 움직이도록 설정하고, 글씨위에 마우스를 올렸을 때 active클래스를 추가합니다. 참쉽죠?(●'◡'●)

<script src="../assets/js/gsap.min.js"></script>
<script>
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: .3, left: e.pageX -5, top: e.pageY - 5});

}
window.addEventListener("mousemove", mouseMove);

// 마우스 커서가 글씨 위에 올라가면 원의 크기는 5배 정도 커짐, 글씨 반전효과 추가

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

span.forEach(span => {
        span.addEventListener("mouseenter", ()=>{
            cursor.classList.add("active");
        });
        span.addEventListener("mouseleave", ()=>{
            cursor.classList.remove("active");
        });
    });
</script>