[Mouse Effect] 마우스 이펙트 05 - 기울기 효과 / 글씨 반전 효과

마우스 이펙트 05 : 기울기 효과 / 글씨 반전 효과

이번 시간에는 마우스 이펙트 - 기울기 효과 및 글씨 반전 효과를 만들어보도록 하겠습니다.

HTML 소스

header, main(마우스 커서 & 이미지 & 명언 & 마우스 인포(좌표값)), footer(모달 박스) 크게 3가지로 이루어져 있다. footer의 모달 박스 내용은 너무 길어지므로 생략한다. 모달 박스를 나타내는 방법에 대해서는 이전에 업로드한 슬라이드 이펙트 게시물을 참조할 것.

<body class="img04">
    <header id="header">
        <h1>JAVASCRIPT MOUSE EFFECT 05</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><a href="mouseEffect04.html">04</a></li>
            <li class="active"><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">
          <div class="mouse__img">
            <figure>
              <img src="../assets/img/effect_bg06.jpg" alt="이미지">
            </figure>
            <figcaption>
              <p>I never dreamed about success, I worked for it</p>
              <p>난 결코 성공에 대해 꿈꾸지 않았다, 나는 꿈을 위해 행동했다.</p>
            </figcaption>
          </div>
        </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>
          <li>maxPageX : <span class="maxPageX">0</span>px</li>
          <li>maxPageY : <span class="maxPageY">0</span>px</li>
          <li>anglePageX : <span class="anglePageX">0</span>px</li>
          <li>anglePageY : <span class="anglePageY">0</span>px</li>
        </ul>
      </div>
    </main>
    <!-- //main -->
  
    <footer>
        <!-- 모달 박스 내용 들어갈 곳. 길어지므로 생략. -->
    </footer>
    <!-- //footer -->
  </body>

CSS 소스

이번 포스팅 마우스 효과 05번에서 처음 쓰인 transform-style: preserve-3d;는 transform에 3D 효과를 적용시키는 속성이다. 공통/초기화 CSS 소스는 하단의 [CSS 소스 보기]버튼을 클릭하여 볼 수 있다.

<style>
    /* mouseType */
    .mouse__wrap {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: #fff;
      width: 100%;
      height: 100vh;
      overflow: hidden;
      cursor: none;
    }
    .mouse__img {
      transform: perspective(600px) rotateX(0deg) rotateY(0deg);
      transform-style: preserve-3d;
      will-change: transform;
      transition: all 0.1s;
    }
    .mouse__img figure {
      width: 50vw;
      position: relative;
    }
    .mouse__img figure::before {
      content: '';
      position: absolute;
      left: 5%;
      bottom: -30px;
      width: 90%;
      height: 40px;
      background: url(../assets/img/effect_bg06.jpg) center no-repeat;
      background-size: 100% 40px;
      filter: blur(15px) grayscale(50%);
      z-index: -1;
      opacity: 0.7;
    }
    .mouse__img figcaption {
      position: absolute;
      left: 50%;
      top: 50%;
      font-size: 16px;
      line-height: 1.6;
      transform: translate3d(-50%, -50%, 150px);
      padding: 10px;
      white-space: nowrap;
      text-align: center;
      background: rgba(0,0,0,0.4);
    }

    .mouse__cursor {
      position: absolute;
      left: 0;
      top: 0;
      width: 100px;
      height: 100px;
      border-radius: 50%;
      background: #fff;
      z-index: 1000;
      pointer-events: none;
      user-select: none;
      mix-blend-mode: difference;
    }
</style>

JS 소스

먼저 e.pageX, e.pageY를 통해 마우스 좌표값을 구하고, 마우스 좌표 기준점을 가운데로 변경해준 다음, 최소값을 -100, 최대값을 100으로 제한하여 움직임이 격해지지 않도록 설정한다. 이미지를 움직여주기 위해 imgMove 스타일의 rotateX에 softPageY값을, rotateY에는 -softPageX값을 넣어준다. 마지막으로 커서는 GSAP을 이용하여 움직임을 주도록 한다.

<script>
    const mouseMove = (e) => {
      // 마우스 좌표값
      let mousePageX = e.pageX;
      let mousePageY = e.pageY;
  
      // 마우스 좌표 기준점을 가운데로 변경
      let centerPageX = window.innerWidth / 2 - mousePageX;
      let centerPageY = window.innerHeight / 2 - mousePageY;
  
      // 최소값은 -100, 최대값은 100으로 설정
      let maxPageX = Math.max(-200, Math.min(200, centerPageX));
      let maxPageY = Math.max(-200, Math.min(200, centerPageY));
  
      // 각도 줄이는 설정
      let anglePageX = maxPageX * 0.1;
      let anglePageY = maxPageY * 0.1;
  
      // 부드럽게 설정
      let softPageX = 0, softPageY = 0;
      softPageX += (anglePageX - softPageX) * 0.4;
      softPageY += (anglePageY - softPageY) * 0.4;
  
      // 이미지 움직이기
      const imgMove = document.querySelector(".mouse__img");
      imgMove.style.transform = "perspective(600px) rotateX("+softPageY+"deg) rotateY("+ -softPageX+"deg)";
  
      // 커서
      gsap.to(".mouse__cursor", {duration: .3, left: mousePageX - 50, top: mousePageY - 50})
  
      // 출력
      document.querySelector(".mousePageX").textContent = mousePageX;
      document.querySelector(".mousePageY").textContent = mousePageY;
      document.querySelector(".centerPageX").textContent = centerPageX;
      document.querySelector(".centerPageY").textContent = centerPageY;
      document.querySelector(".maxPageX").textContent = maxPageX;
      document.querySelector(".maxPageY").textContent = maxPageY;
      document.querySelector(".anglePageX").textContent = Math.round(anglePageX);
      document.querySelector(".anglePageY").textContent = Math.round(anglePageY);
    };
  
    window.addEventListener("mousemove", mouseMove);
</script>

결과

원본(HTML/JS) 소스 보기

CSS 소스 보기

'Effect > Mouse Effect' 카테고리의 다른 글

[Mouse Efffect] 마우스 이펙트 06 (2)	2022.09.29
[Mouse Effect] 마우스 이펙트 04 - 이미지 효과 (5)	2022.09.22
[Mouse Effect] 마우스 이펙트 03 - 조명 효과 (4)	2022.09.22
[Mouse Effect] 마우스 이펙트 02 - GSAP (2)	2022.09.18
[Mouse Effect] 마우스 이펙트 01 (6)	2022.09.05

코딩공책📚

[Mouse Effect] 마우스 이펙트 05 - 기울기 효과 / 글씨 반전 효과

마우스 이펙트 05 : 기울기 효과 / 글씨 반전 효과

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Mouse Effect' 카테고리의 다른 글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Mouse Effect] 마우스 이펙트 05 - 기울기 효과 / 글씨 반전 효과

마우스 이펙트 05 : 기울기 효과 / 글씨 반전 효과

HTML 소스

CSS 소스

JS 소스

결과

'Effect > Mouse Effect' 카테고리의 다른 글

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바