마우스 이펙트06

Pain Past
Pain Past
is pleasure
is pleasure
지나간 고통은
지나간 고통은
쾌락이다.
쾌락이다.

소스 보기

Javascript

HTML

CSS

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

        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: 0.4, x: positionSlow});
            gsap.to(".spanFast", {duration: 0.4, x: -positionFast});
            gsap.to(".mouse__cursor", {duration: 0.3, left: e.pageX - 5, top: e.pageY - 5});
        }

       window.addEventListener("mousemove", mouseMove);

    //  마우스 커서가 글씨 위에 올라가면 원의 크기는 5배 정도 크게 작업... 글씨 반전효과 추가
        window.addEventListener("mousemove",()=>{
            span.forEach(span => {
                span.addEventListener("mouseenter", () =>{
                    cursor.classList.add("active");
                });
                span.addEventListener("mouseleave", () =>{
                    cursor.classList.remove("active");
                });
            });
        })
}

{
    <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_bg20@2x-min.jpg" alt="">
               </figure>
            </div>
        <div class="mouse__text">
            <div class="line">
                <div class="left">
                    <div class="spanWrap">
                        <div class="spanSlow span">Pain Past</div>
                    </div>
                </div>
                <div class="right">
                    <div class="spanWrap">
                        <div class="spanSlow span">Pain Past</div>
                    </div>
                </div>
            </div>
            <div class="line">
                <div class="left">
                    <div class="spanWrap">
                        <div class="spanFast span">is pleasure</div>
                    </div>
                </div>
                <div class="right">
                    <div class="spanWrap">
                        <div class="spanFast span">is pleasure</div>
                    </div>
                </div>
            </div>
            <div class="line">
                <div class="left">
                    <div class="spanWrap">
                        <div class="spanSlow span">지나간 고통은</div>
                    </div>
                </div>
                <div class="right">
                    <div class="spanWrap">
                        <div class="spanSlow span">지나간 고통은</div>
                    </div>
                </div>
            </div>
            <div class="line">
                <div class="left">
                    <div class="spanWrap">
                        <div class="spanFast span">쾌락이다.</div>
                    </div>
                </div>
                <div class="right">
                    <div class="spanWrap">
                        <div class="spanFast span">쾌락이다.</div>
                    </div>
                </div>
            </div>        
        </div>
        </div>
    </section>
</main>
}

{
    .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;
        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);
    }
    .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: rgba(255,255,255,0.9);
        user-select: none;
        pointer-events: none;
    }
    .mouse__cursor.active{
        transform: scale(5);
    }
}