No Pain
No Pain
No Gain
No Gain
고통 없이는
고통 없이는
얻는 것도 없다.
얻는 것도 없다.

JavaScript Mouse Effect06

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

<div class="mouse__wrap">
    <div class="mouse__img">
        <figure>
            <img src="img/img07.jpg" alt="이미지">
        </figure>
    </div>
    <div class="mouse__text">
        <div class="line">
            <div class="left">
                <div class="spanWrap">
                    <div class="spanSlow">No Pain</div>
                </div>
            </div>
            <div class="right">
                <div class="spanWrap">
                    <div class="spanSlow">No Pain</div>
                </div>
            </div>
        </div>
        <div class="line">
            <div class="left">
                <div class="spanWrap">
                    <div class="spanFast">No Gain</div>
                </div>
            </div>
            <div class="right">
                <div class="spanWrap">
                    <div class="spanFast">No Gain</div>
                </div>
            </div>
        </div>
        <div class="line">
            <div class="left">
                <div class="spanWrap">
                    <div class="spanSlow">고통 없이는</div>
                </div>
            </div>
            <div class="right">
                <div class="spanWrap">
                    <div class="spanSlow">고통 없이는</div>
                </div>
            </div>
        </div>
        <div class="line">
            <div class="left">
                <div class="spanWrap">
                    <div class="spanFast">얻는 것도 없다.</div>
                </div>
            </div>
            <div class="right">
                <div class="spanWrap">
                    <div class="spanFast">얻는 것도 없다.</div>
                </div>
            </div>
        </div>
    </div>
</div>

.mouse__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    cursor: none;
}
.mouse__img {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 50%;
}
.mouse__text {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -20%);
    color: #fff;
    font-size: 3vw;
    line-height: 1.5;
}
.mouse__text .line {
    width: 100%;
    display: flex;
}
.mouse__text .line .left {
    width: 50vw;
    color: orange;
    transform: skew(0deg, -15deg);
    overflow: hidden;
}
.mouse__text .line .left .spanWrap {
    width: 100vw;
    text-align: center;
} 
.mouse__text .line .right {
    width: 50vw;
    transform: skew(0deg, 15deg);
    overflow: hidden;
}
.mouse__text .line .right .spanWrap {
    width: 100vw;
    text-align: center;
    transform: translateX(-50vw);
}
.cursor {
    position: absolute;
    left: 0; top: 0;
    width: 20px;
    height: 20px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(255,255,255,0.8);
    user-select: none;
    pointer-events: none;
}

function 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(".cursor", {duration: 0.3, left: e.pageX, top: e.pageY});
}
document.addEventListener("mousemove", mousemove);