mouseEffect06

                                Where there is a will 
                            
                                Where there is a will 
                            
                                there is a way 
                            
                                there is a way 
                            
                                뜻이 있는 곳엔 
                            
                                뜻이 있는 곳엔 
                            
                                길이 있다.
                            
                                길이 있다.

소스 보기

Javascript

HTML

CSS

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,
        top : e.pageY,
        xPercent : -50,
        yPercent : -50,
    });
}
window.addEventListener('mousemove', mouseMove);

// 마우스 커서가 글씨 위에 올라가면 크기는 5배 정도 크게, 글씨는 반전효과
const spans = document.querySelectorAll('.mouse__text span');
const cursor = document.querySelector('.mouse__cursor');
cursor.style.transition = "scale 1s";
spans.forEach((span, idx) => {
    span.addEventListener('mouseenter', (e) => {
        cursor.style.scale = "10";
    });

    span.addEventListener('mouseleave', (e) => {
        cursor.style.scale = "1";
    });
});

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <div class="mouse__img">
                <figure>
                    <img src="../asset/img/effect_img02@2x.jpg" alt="09">
                </figure>
            </div> 
            <div class="mouse__text">
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanSlow">Where there is a will </span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanSlow">Where there is a will </span>
                        </div>
                    </div>
                </div>
                
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanFast">there is a way </span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanFast">there is a way </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>

/* mouseType */
.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;
    font-weight: bold;
    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);
    color: rgb(219, 121, 172);
}

.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: #fff;
    opacity: 0.9;
    user-select: none;
    pointer-events: none;
}