Mouse Effect 05

마우스 이펙트

마우스 이펙트 다섯번째 시간입니다.

---

마우스 이펙트 05

오늘은 마우스의 움직임에 따라 기울기 효과와 글씨 반전 효과를 줘보겠습니다.

원본 사이트 보기 원본 소스 보기

01. HTML 코드

mouse__img를 추가하고 그 안에 figrue를 넣어 구조를 조금 바꿨습니다.

{
    <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_bg15-min.jpg" alt="이미지">
                </figure>
                <figcaption>
                    <p>Life is a choice</p>
                    <p>인생은 선택이다.</p>    
                </figcaption>
            </div>
        </div>
    </section>
    <div class="mouse__info">
        <ul>
            <li>mousePageX : <span class="mousePageX">0px</span><span>px</span></li>
            <li>mousePageY : <span class="mousePageY">0px</span><span>px</span></li>
            <li>centerPageX : <span class="centerPageX">0px</span><span>px</span></li>
            <li>centerPageY : <span class="centerPageY">0px</span><span>px</span></li>
            <li>maxPageX : <span class="maxPageX">0px</span><span>px</span></li>
            <li>maxPageY : <span class="maxPageY">0px</span><span>px</span></li>
            <li>anglePageX : <span class="anglePageX">0px</span><span>px</span></li>
            <li>anglePageY : <span class="anglePageY">0px</span><span>px</span></li>
        </ul>
    </div>
  </main>
} 

02. CSS 코드

mix-blend-mode: difference와 transform-style: preserve-3d 효과를 사용했습니다.

{
    .mouse__wrap {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        width: 100%;
        height: 100vh;
        overflow: hidden;
        cursor: none;
    }
    .mouse__img {
        transform: perspective(600px) rotateX(0deg) rotateY(0deg);
        transform-style: preserve-3d;
        will-change: transform;
        transition: all 0.1s;
    }
    .mouse__wrap figure img{
        width: 40vw;
        position: relative;
    }
    .mouse__wrap figure::before {
        content: '';
        position: absolute;
        left: 5%;
        bottom: -30px;
        width: 90%;
        height: 40px;
        background: url(../assets/img/effect_bg15-min.jpg) center no-repeat;
        background-size: 100% 40px;
        filter: blur(15px) grayscale(50%);
        z-index: -1;
        opacity: 0.7;
    }
    .mouse__wrap figcaption {
        position: absolute;
        left: 50%;
        top: 50%;
        font-size: 1vw;
        line-height: 1.6;
        transform: translate3d(-50%, -50%, 150px);
        padding: 1vw;
        white-space: nowrap;
        text-align: center;
        background: rgba(0,0,0,0.4);
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 100px;
        height: 100px;
        border-radius: 50%;
        background: #fff;
        z-index: 1000;
        pointer-events: none;
        user-select: none;
        mix-blend-mode: difference;
    }
    .mouse__info {
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: #fff;
    }
}

03. script 코드

1. 먼저 마우스 좌표값을 구하고 좌표 기준점을 가운데로 맞춰줍니다.
2. 이미지가 너무 크게 움직이지 않도록 max값을 200으로 설정해주고 anglePage변수를 설정해서 각도를 줄여준뒤, softPage 변수를 설정해서 움직임을 부드럽게 해줍니다.
3. ImgMove변수를 설정해준뒤, transform 효과를 줘서 각도에따라 움직이게 해주고 여기에 softPage값을 넣어줍니다.
4. addEventListener로 마우스가 움직일때 만들어둔 mouseMove함수가 작동하도록 넣어주면 끝입니다.

{
    const mouseMove = (e) => {
        // 마우스 좌표값
        let mousePageX = e.pageX;
        let mousePageY = e.pageY;

        // 마우스 좌표 기준점을 가운데로 변경
        let centerPageX = window.innerWidth/2 - mousePageX;
        let centerPageY = window.innerHeight/2 - mousePageY;

        // 최소값은 -200 최댓값은 200 설정
        let maxPageX = Math.max(-200, Math.min(200, centerPageX));
        let maxPageY = Math.max(-200, Math.min(200, centerPageY));

        // 각도 줄이는 과정
        let anglePageX = maxPageX * 0.1;
        let anglePageY = maxPageY * 0.1;

        // 부드럽게 설정
        let softPageX = 0, softPageY = 0;
        softPageX += (anglePageX - softPageX) * 0.4;
        softPageY += (anglePageY - softPageY) * 0.4;

        // 이론상0인데 오차에 0.4 곱해줌

        // 이미지 움직이기
        const ImgMove = document.querySelector(".mouse__img");
        ImgMove.style.transform = "perspective(600px) rotateX(" + softPageY + "deg) rotateY("+ -softPageX +"deg)";

        // 커서
        gsap.to(".mouse__cursor", {duration: .3, left: mousePageX - 50, top: mousePageY - 50})

        // 출력
        document.querySelector(".mousePageX").textContent = mousePageX;
        document.querySelector(".mousePageY").textContent = mousePageY;
        document.querySelector(".centerPageX").textContent = centerPageX;
        document.querySelector(".centerPageY").textContent = centerPageY;
        document.querySelector(".maxPageX").textContent = maxPageX;
        document.querySelector(".maxPageY").textContent = maxPageY;
        document.querySelector(".anglePageX").textContent = Math.round(anglePageX);
        document.querySelector(".anglePageY").textContent = Math.round(anglePageY);
    };

    window.addEventListener("mousemove", mouseMove);
}