마우스 이펙트의 기울기 / 글씨 반전 효과를 알아보자!

마우스 이펙트 : 기울기 효과 / 글씨 반전 효과

이번에는 마우스에 이미지 효과를 넣은 이펙트를 코딩해봤습니다.

HTML

HTML 코드는 뭐.. 다른 것들과 거의 비슷하죠..? 추가적인 mouse__info의 좌표 값만 따로 몇 개만 추가하시면 됩니다.
각 CSS로 이용할 클래스 이름 지정과 스크립트에 이용할 클래스 이름mouse__cursor 미리 지정해둡니다.
또한, 현재 마우스 좌표 값을 스크립트 적용하기 위해 mouse__info 클래스에 각각에 좌표 값에 맞는 클래스를 따로 지정해줍니다.
글은..여러분이 평소에 가진 가치관을 기준으로...?

HTML CODE

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <div class="mouse__img">
                <figure>
                    <img src="../assets/img/slide02.jpg" alt="이미지">
                </figure>
                <figcaption>
                    <p>Do it yourself.</p>
                    <p>너 혼자 알아서 해라.</p>
                </figcaption>
            </div>
        </div>
    </section>

    <div class="mouse__info">
        <ul>
            <li>mousePageX : <span class="mousePageX">0</span>px</li>
            <li>mousePageY : <span class="mousePageY">0</span>px</li>
            <li>centerPageX : <span class="centerPageX">0</span>px</li>
            <li>centerPageY : <span class="centerPageY">0</span>px</li>
            <li>maxPageX : <span class="maxPageX">0</span>px</li>
            <li>maxPageY : <span class="maxPageY">0</span>px</li>
            <li>anglePageX : <span class="anglePageX">0</span>px</li>
            <li>anglePageY : <span class="anglePageY">0</span>px</li>
        </ul>
    </div>
</main>

CSS

이번 CSS는 3d 효과 느낌을 주기 위해 공간감을 추가해주는 preserve-3d을 사용했습니다.
해당 preserve-3d를 주면 자식 요소에 3D효과를 추가해주는 기능이 있습니다.
3D효과를 추가 해줬다면 또 다른 위치 값을 줘야하기에 mouse__img에 따로 공간감을 더 주기 위해 perspective를 사용해줍니다.
또한, 따로 글에도 마찬가지로 3D효과를 위해 translate3d를 추가해서 사용해줍니다.

CSS CODE

/* mouseType */
.mouse__wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #fff;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    cursor: none;
}
.mouse__wrap figure {
    width: 40vw;
}
.mouse__img {
    transform: perspective(600px) rotateX(0deg) rotateY(0deg);
    transform-style: preserve-3d;
    will-change: transform;
}
.mouse__img figure {
    width: 50vw;
    position: relative;
}
.mouse__img figure::before {
    content: '';
    position: absolute;
    left: 5%;
    bottom: -20px;
    width: 90%;
    height: 40px;
    background: url(../assets/img/slide02.jpg) center no-repeat;
    background-size: 100% 40px;
    filter: blur(15px) grayscale(50%);
    z-index: -1;
    opacity: 0.4;
}
.mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: #fff;
    z-index: 1000;
    pointer-events: none;
    user-select: none;
    opacity: 0.7;
    mix-blend-mode: difference;
}
.mouse__img 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: #00000040;
}
.mouse__info {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
    list-style: none;
}

SCRIPT

이번 스크립트는 좌표를 중심적으로 짜봤습니다.

1. 마우스의 좌표 값은 앞선 다른 마우스 이펙트과 마찬가지로 똑같이 써줍니다.
2. 마찬가지로 마우스 좌표의 중앙 기준점을 다른 마우스 이펙트와 같은 형식으로 써줍니다.
3. 이젠 마우스의 움직임을 미친듯이 따라가는.. 것들의 움직임의 제한을 줘야합니다..
4. 우선 해당 주석 : 이미지 움직이기와 같이 요소를 잡아주고 해당 값에 스타일을 지정해주며, 언제든 해당 값만 넣으면 변할 수 있도록 설정해줍니다.
5. 첫 번째로 이젠.. 각 좌표 값을 정해줘야 하는데, maxPageX / Y의 움직임을 제한을 주기위해 Math.max / min() 함수를 사용해줍니다.
6. 두 번째는 anglePageX / Y에다가 maxPageX / Y의 0.1만 곱해주는 형식으로 대입하여 각도의 제한을 줍니다.
7. 마지막으로 언제나 사용하던 gsap를 사용하여 기존 마우스 커서 스타일을 대체해줍니다.

Math.max() / min()는 각각에 주어진 값에 최대 값과 최소 값을 구할 수 있습니다.

SCRIPT CODE

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

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

    // 최소값 -100 최대값 100   // 중요
    let maxPageX = Math.max(-200, Math.min(100, centerPageX));
    let maxPageY = Math.max(-200, Math.min(100, 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;
    
    // 이미지 움직이기
    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 - 25, top: mousePageY - 25})

    // 출력
    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);

CODE GO

RESULT

SITE GO