mouseEffect04

마우스 이펙트 - 이미지효과

마우스의 움직임에 따라서 안에 중앙에 있는 이미지가 미세하게 움직이는 효과를 만들어봅시다.

원본 소스 보기

원본 사이트

---

html

중앙에 떠있을 이미지를 넣어줍니다. figcaption으로 이미지 안에 글자를 넣어줍니다. 마우스의 위치 값들이 나타나도록 mouse__info를 넣어줍니다.

코드보기

<main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <figure>
                <img src="../assets/img/effect_bg20-min.jpg" alt="이미지">
                <figcaption>
                    <p>Only I can change my life. No one can do it for me.</p>
                    <p>나만이 내 인생을 바꿀 수 있다. 아무도 날 대신할 수 없다.</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>

css

마우스 오버시의 효과를 만들어줍니다.

코드보기

/* mouseType */
.mouse__wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    color: #000;
    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: #ccc;
    border-radius: 50%;
    z-index: 1000;
    user-select: none;
    pointer-events: none;
}

.mouse__info {
    position: absolute;
    left: 20px;
    bottom: 10px;
    font-size: 14px;
    line-height: 1.6;
    color: #fff;
}

js

centerPageX는 window.innerWidth전체 페이지의 가로값에서 2를 나눈 뒤, mousePageX의 값을 빼서 구합니다.
세로값도 마찬가지의 방식으로 구하는데, 이는 페이지의 가로값을 구한 뒤에 나눠서 정중앙의 위치 값을 구하고, 마우스의 위치는 변동값으로 e.pageX내에서 계속 변동되기에 그 값을 빼서, 고정값인 화면의 값에서 마우스의 움직이는 값을 빼서 이미지의 움직임이 커서와 반대 방향으로 움직이도록 합니다. gsap를 통해서 부여한 이미지의 움직임은 앞의 방식으로 구한 값 centerPageX에서 움직임을 어떤 식으로 발생할지를 설정합니다. 20을 나눈것은 단지, 이미지의 움직임이 너무 커서 줄여주기 위함입니다. 커서는 e.pageX인 이미지 내부에서의 가로 값에서 커서를 2를 나눈 정중앙의 값을 빼서 이미지 내에서의 커서의 움직임을 설정합니다. 세로값도 가로값과 마찬가지의 방식으로 구합니다.

const cursor = document.querySelector(".mouse__cursor");
const cursorRect = cursor.getBoundingClientRect();

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,
    }); //duration 얼마나 걸릴지, 기본값 = 0.5

    // 마우스 좌표 값
    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
    }); //더 부드럽게 하기 위한 20을 나누고


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