EFFECT | MOUSE | 마우스 커서 움직임 반대로 이미지 움직이기

mouseEffect | 이미지 효과

오늘의 목표
👉🏻 마우스 커서 움직임에 따라 배경 이미지가 반대로 움직이는 효과주기
👉🏻 마우스 커서 디자인이 이미지 안에서만 따라다니도록 설정하기

---

1. 사이트 구조 살펴보기

CSS 살펴보기

+ object-fit: cover;    background-size: cover;와 같은 역할을 하는 속성으로 배경이 아닌 이미지에 사용할때 쓰이는 속성입니다.

<style>
    /* mouseType */
    .mouse__wrap {
        /* vw하면 스크롤 생김 */
        width: 100%;
        height: 100vh;
        display: flex;
        align-items: center;
        justify-content: center;
        /* 두줄 */
        flex-direction: column;
        color: #fff;
        overflow: hidden;
    }
    .mouse__wrap figure {
        width: 50vw;
        height: 50vh;
        position: relative;
        overflow: hidden;
        transition: transform 500ms ease;
        cursor: none;
    }
    .mouse__wrap figure:hover {
        transform: scale(1.025);
    }
    .mouse__wrap figure img {
        position: absolute;
        left: -5%;
        top: -5%;
        width: 110%;
        height: 110%;
        object-fit: cover;
    }
    .mouse__wrap figure figcaption {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        text-align: center;
        font-size: 16px;
        white-space: nowrap;
        line-height: 1.4;
        font-weight: 300;
    }
    .mouse__cursor {
        position: absolute;
        left: 0;
        top: 0;
        width: 20px;
        height: 20px;
        background: #fff;
        border-radius: 50%;
        z-index: 1000;
        user-select: none;
    }
    .mouse__info {
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: #fff;
    }
</style>

HTML 살펴보기

영화 '쥬토피아'에 나오는 명언을 넣어주었습니다.

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <figure>
                <img src="../assets/img/effect_bg04-min.jpg" alt="이미지">
                <figcaption>
                    <p>Don't beat yourself up. Don't need to run so fast.<br> Sometimes we coma last but we did our best.</p>
                    <p>자신을 자책하지마, 너무 서두르지 않아도 돼.<br> 마지막으로 들어왔더라도 최선을 다했으면 됐어.</p>
                </figcaption>
            </figure>
        </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>
        </ul>
    </div>
</main>

2. script 살펴보기

📌 cursor 설정하기 : gsap 활용

커서가 중앙에 올 수 있도록 왼쪽 좌표값에 cursorRect.width/2, 위쪽 좌표값에 cursorRect.height/2 를 설정해주었습니다.

📌 cursor 위치 좌표값 초기화하기

커서가 화면 정중앙에 있다고 가정하고
window.innerWidth/2(브라우저의 가로값/2 : 페이지 가로 중앙값)에서 커서의 x축 좌표값 pageX를 빼면 값이 0이 됩니다.
이를 Y축도 같은 방식으로 구하고 난 후 커서의 움직임에 따라 값을 살펴보면
오른쪽, 아래쪽으로 갈수록 (-)값, 왼쪽, 위쪽으로 갈수록 (+)값이 나오는 것을 볼 수 있습니다.

📌 cursor에 움직임에 따라 배경 이미지 반대로 움직이기 : gsap 활용

이미지에 transform = translate()를 통해 움직여주는데 마우스의 움직임에 따라 살짝씩 움직일 수 있도록 centerPageX,Y/20 으로 설정해주었습니다.
(이때, centerPageX,Y 값은 위에서 커서 좌표값을 초기화 해준 값을 가리킵니다.)
overflow: hidden;과 마우스를 오버했을 때 스케일이 살짝 커지는 효과를 설정해주면 더 있어보이게 연출이 가능합니다.

<script>
    // 선택자 설정
    const cursor = document.querySelector(".mouse__cursor");
    const cursorRect = cursor.getBoundingClientRect();

    // .mouse__wrap figure 범위 정해줬기 때문에 여기 안에서만 커서가 움직임
    document.querySelector(".mouse__wrap figure").addEventListener("mousemove", (e) => {
        // 커서
        gsap.to(cursor, {
            duration: .2,
            left: e.pageX - cursorRect.width/2,
            top: e.pageY - cursorRect.height/2,
        })

        // 마우스 좌표 값
        let mousePageX = e.pageX;
        let mousePageY = e.pageY;

        // 전체 가로
        // window.innerWidth    //1920 : 브라우저 크기(스크롤바 미포함) //스크린 크기따라
        // window.outerWidth    //1920 : 브라우저 크기(스크롤바 포함)
        // window.screen.width    //1920 : 화면 크기 //모니터 크기

        // 마우스 좌표 값 가운데로 초기화
        // 전체길이/2 - 마우스 좌표값 == 0
        let centerPageX = window.innerWidth/2 - mousePageX;
        let centerPageY = window.innerHeight/2 - mousePageY;

        // 이미지 움직이기
        const imgMove = document.querySelector(".mouse__wrap figure img");
        // imgMove.style.transform = "translate("+ centerPageX/20 +"px, "+ centerPageY/20 +"px)"

        gsap.to(imgMove, {
            duration: 0.3,
            x: centerPageX/20,
            y: centerPageY/20
        })

        // 출력
        document.querySelector(".mousePageX").textContent = mousePageX;
        document.querySelector(".mousePageY").textContent = mousePageY;
        document.querySelector(".centerPageX").textContent = centerPageX;
        document.querySelector(".centerPageY").textContent = centerPageY;
    });
</script>

원본 소스 보기

실제 사이트 보기