마우스 이펙트 04

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

원본 소스 보기

원본 사이트 보기

---

script 코드

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: .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;
    });

---

html

코드 보기

 

<section id="mouseType">
    <div class="mouse__cursor"></div>
    <div class="mouse__wrap">
      <figure>
        <img src="../assets/img3/effect_bg04-min.jpg" alt="이미지" />
        <figcaption>
          <p>The future depends on What we do in the present.</p>
          <p>미래 는 현재 우리가 무엇을 하는가에 달려있다.</p>
        </figcaption>
      </figure>
    </div>
  </section>
  <div class="mouse__info">
    <ul>
      <li>clientX : <span class="clientX">0</span>px</li>
      <li>clientY : <span class="clientY">0</span>px</li>
      <li>offsetX : <span class="offsetX">0</span>px</li>
      <li>offsetY : <span class="offsetY">0</span>px</li>
    </ul>
  </div>

---

css

코드 보기

 

 /* mouseType */
    .mouse__wrap {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      overflow: hidden;
    }

    .mouse__wrap figure {
      width: 50vw;
      height: 50vh;
      position: relative;
      overflow: hidden;
      transition: transform 500ms ease;
      cursor: none;
    }

    .mouse__wrap figure figcaption {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
      font-size: 16px;
      word-spacing: nowrap;
      line-height: 1.4;
      font-weight: 300;
    }

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