                                Even miracles
                            
                                Even miracles
                            
                                take a little time.
                            
                                take a little time.
                            
                                아무리 기적이라 해도
                            
                                아무리 기적이라 해도
                            
                                시간이 조금 걸린단다.
                            
                                시간이 조금 걸린단다.

Mouse Effect07 - javascript

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

pageX : 0
pageY : 0

<main>
    <div class="cursor"></div>

    <div class="contents">
        <div class="moveImg">
            <div class="textWrap">
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanSlow">Even miracles</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanSlow">Even miracles</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanFast">take a little time.</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanFast">take a little time.</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 class="imgWrap">
                <img src="../assets/img/bg2@2.jpg" alt="이미지입니다.">
            </div>
        </div>
    </div>
</main>

/* textWrap */
.textWrap {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -30%);
    color: #fff;
    font-size: 4vw;
    line-height: 1.5;
    font-family: 'NEXONLv1Gothic';
}
.textWrap .line {
    width: 100%;
    display: flex;
}
.textWrap .line .left {
    width: 50vw;
    color: #F0F600;
    overflow: hidden;
    transform: skewY(-15deg);
}
.textWrap .line .left .spanWrap {
    width: 100vw;
    text-align: center;
}
.textWrap .line .right {
    width: 50vw;
    overflow: hidden;
    transform: skewY(15deg);
}
.textWrap .line .right .spanWrap {
    width: 100vw;
    text-align: center;
    transform: translateX(-50vw);
}
.textWrap span {
    display: inline-block;
}

/* imgWrap */
.imgWrap {
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
    width: 50%;
}
.imgWrap img {
    width: 100%;
}

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: .4, x: positionSlow});
    gsap.to(".spanFast", {duration: .4, x: -positionFast});

    document.querySelector(".pageX").innerText = parseInt(e.pageX) + "px";
    document.querySelector(".pageY").innerText = parseInt(e.pageY) + "px";
};

window.addEventListener("mousemove", mouseMove);

// 소스보기 실행함수
modal();