마우스 이펙트

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

Source

JAVASCRIPT

HTML

CSS

//선택자
const cursor = document.querySelector(".mouse__cursor");//마우스 커서

//01 : 마우스가 움직일 때 설정 (매개변수로 설정)
const mouseMove = (e) => {
    //요소 크기에서 브라우저 페이지 반 값 빼주고 현재위치값 빼주면 가운데 정렬
    let positionSlow = (e.pageX - (window.innerWidth/2)) * 0.1;
    let positionFast = (e.pageX - (window.innerWidth/2)) * 0.3;

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


    //02 : 마우스 커서가 글씨 위에 올라가면 원의 크기는 5배 정도 크게 작업... 글씨 반전 효과 추가
    // 방법 01 : 선택자로 텍스트들의 부모를 선택한 뒤 CSS의 트렌스폼 스케일 설정을 해줍니다.
    // document.querySelector(".mouse__text").addEventListener("mouseover", () => {
    // cursor.style.transform = "scale(5)"
    // });

    // document.querySelector(".mouse__text").addEventListener("mouseout", () => {
    // cursor.style.transform = "scale(1)"
    // });

    //방법 02 : 반복문을 통해 설정합니다. : 이벤트 리스너는 All가 적용되지 않으므로 반복문을 통해 설정할 수 있습니다!
    const leftLine = document.querySelectorAll(".mouse__text .spanSlow"); //라인 선택자.
    const rightLine = document.querySelectorAll(".mouse__text .spanFast"); 

    leftLine.forEach((el)=>{
        el.addEventListener("mouseover", () => {
            cursor.style.transform = "scale(5)"
        });
        el.addEventListener("mouseout", () => {
            cursor.style.transform = "scale(1)"
        });
    });

    rightLine.forEach((el)=>{
        el.addEventListener("mouseover", () => {
            cursor.style.transform = "scale(5)"
        });

        el.addEventListener("mouseout", () => {
            cursor.style.transform = "scale(1)"
        });
    });

<main id="main">
    <section id="mouseType06">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <div class="mouse__img">
                <figure>
                    <img src="../assets/img/city_bg05-2.jpg" alt="">
                </figure>
            </div>
            <div class="mouse__text">
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanSlow">Pain Past</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanSlow">Pain Past</span>
                        </div>
                    </div>
                </div>
                <div class="line">
                    <div class="left">
                        <div class="spanWrap">
                            <span class="spanFast">is pleasure.</span>
                        </div>
                    </div>
                    <div class="right">
                        <div class="spanWrap">
                            <span class="spanFast">is pleasure.</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>
<!-- //main -->

/* mouseType06 */
    .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%;
        height: 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;
        top: 0;
        left: 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;
        mix-blend-mode: difference;
    }