마우스 이펙트 04

I never dreamed about success, I worked for it

난 결코 성공에 대해 꿈꾸지 않았다, 나는 꿈을 위해 행동했다.

mousePageX : 0px
mousePageY : 0px
centerPageX : 0px
centerPageY : 0px

소스 보기

Javascript

HTML

CSS

<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 (브라우저 줄어들면 값도 줄어든다. / 스크롤바 생기면 값이 줄어든다.)
    // wiudow.screen.width  // 화면 크기 1920 (브라우저 줄어들어도 값 그대로 1920)

    // 마우스 좌표값 가운데로 초기화
    // 전체 길이 / 2 - 마우스 좌표값 == 0 (전체 길이 ÷ 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 방식 (훨씬 더 부드러워짐)
    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>

<body class="img04">
  <header id="header">
      <h1>JAVASCRIPT MOUSE EFFECT 04</h1>
      <p>마우스 이펙트 - 이미지 효과</p>
      <ul>
          <li><a href="mouseEffect01.html">01</a></li>
          <li><a href="mouseEffect02.html">02</a></li>
          <li><a href="mouseEffect03.html">03</a></li>
          <li class="active"><a href="mouseEffect04.html">04</a></li>
          <li><a href="mouseEffect05.html">05</a></li>
          <li><a href="mouseEffect06.html">06</a></li>
          <li><a href="mouseEffect07.html">07</a></li>
      </ul>
  </header>
  <!-- //header -->

  <main id="main">
      <section id="mouseType">
          <div class="mouse__cursor"></div>
          <div class="mouse__wrap">
            <figure>
                  <img src="../assets/img/effect_bg02.jpg" alt="이미지">
                  <figcaption>
                      <p>I never dreamed about success, I worked for it</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>
  <!-- //main -->

  <footer>
      <!-- 모달 박스 내용 들어갈 곳. 길어지므로 생략. -->
  </footer>
  <!-- //footer -->
</body>

<style>
  /* mouseType */
  .mouse__wrap {
      width: 100%;
      height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      overflow: hidden;
      flex-direction: column;
  }
  .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;  /* background 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;
  }
</style>