Mouse Effect 04

마우스 이펙트

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

---

마우스 이펙트 04

중앙의 이미지내에서 마우스 커서를 따라 조금 흔들리는듯한 이미지 효과를 줬습니다.

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

01. HTML 코드

좌표값을 실시간으로 확인할 수 있도록 mouse__info값을 추가 해줬습니다.

{
    <main id="main">
    <section id="mouseType">
        <div class="mouse__cursor"></div>
        <div class="mouse__wrap">
            <figure>
                <img src="../assets/img/effect_bg13-min.jpg" alt="이미지">
                <figcaption>
                    <p>Experience is the best teacher.</p>
                    <p>경험은 최고의 스승이다.</p>    
                </figcaption>
            </figure>
        </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>
        </ul>
    </div>
  </main>
} 

02. CSS 코드

이미지 크기를 110%로 늘려주고 트랜스폼 효과를 줬습니다.

{
    .mouse__wrap {
        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;
        pointer-events: none;
    }
    .mouse__info {
        position: absolute;
        left: 20px;
        bottom: 10px;
        font-size: 14px;
        line-height: 1.6;
        color: #fff;
    } 
}

03. script 코드

1. 마우스이펙트 3번과 같이 getBoundingClientRect를 이용해서 좌표값을 객체로 불러오고 커서값을 중앙으로 맞춰줍니다.
2. 마우스 좌표값을 변수로 설정해줍니다.
3. 움직이게 될 centerPage값을 변수로 저장해줍니다.
centerPageX값 = window.innerWidth/2(고정값) - mousePageX(움직임에 따라 변하는 값)
centerPageY값 = window.innerHeight/2(고정값) - mousePageY(움직임에 따라 변하는 값)
4. imgMove 변수에 이미지를 저장합니다.
gsap 를 이용해서 이미지를 x축, y축으로 움직여줍니다.
마지막으로 움직임 효과가 너무 과하지 않게 값을 20으로 나눠줍니다.

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

    document.querySelector(".mouse__wrap figure").addEventListener("mousemove", (e) => {
      // 커서
      gsap.to(cursor, {
          duration: .5,
          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;
    });
}