마우스 이펙트04

Experience is the best teacher.

경험은 최고의 스승이다.

mousePageX : 0pxpx
mousePageY : 0pxpx
centerPageX : 0pxpx
centerPageY : 0pxpx

소스 보기

Javascript

HTML

CSS

{
    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.innerWidth/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;
    });
}

{
    <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>
}

{
    .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;
    }
}