mouseEffect06 - 텍스트 효과

개요

글자가 구겨저있는 것도 신기한데

심지어 마우스의 움직임에 따라 움직이기도 한다!

 

이를 한 번 쪼개보자!

 

HTML

<div class="mouse__text">
    <div class="line">
        <div class="left">
            <div class="spanWrap">
                <div class="spanSlow">Pain Past</div>
            </div>
        </div>
        <div class="right">
            <div class="spanWrap">
                <div class="spanSlow">Pain Past</div>
            </div>
        </div>
    </div>
    <div class="line">
        <div class="left">
            <div class="spanWrap">
                <div class="spanFast">is pleasure.</div>
            </div>
        </div>
        <div class="right">
            <div class="spanWrap">
                <div class="spanFast">is pleasure.</div>
            </div>
        </div>
    </div>

줄 마다 left, right라 적고 2개씩 만들어준다

그리고 느리게 움직이는 것을 spanSlow, 빠르게 움직이는 것을 spanFast라 설정한다

 

CSS

.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;
    overflow: hidden;
    transform: skew(0deg, 15deg);
}

.mouse__text .line .right .spanWrap {
    width: 100vw;
    text-align: center;
    transform: translateX(-50vw);
}

overflow: hidden을 주어 서로가 겹치는 부분은 나오지 않게 해준다(이게 제일 신기하다)

그리고 왼쪽과 오른쪽의 글자 색을 다르게 해서 입체감을 준다

 

JAVASCRIPT

<script>
    function mousemove(e){
        let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.13;
        let positionFast = (e.pageX - (window.innerWidth/2)) * 0.25;

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

 

느리게 움직이는 것은 * 0.13으로,

빠르게 움직이는 것은 *0.25를 해주어서 

 

효과를 내 준다