[Mouse Efffect] 마우스 이펙트 06

마우스 이펙트 06 : 텍스트 효과

이번 시간에는 마우스 이펙트 - 텍스트 효과를 만들어보도록 하겠습니다.

HTML 소스

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

<body class="img04">
    <header id="header">
        <h1>JAVASCRIPT MOUSE EFFECT 06</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><a href="mouseEffect05.html">05</a></li>
            <li class="active"><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_bg01.jpg" alt="이미지">
            </figure>
            <div class="mouse__text">
              <div class="line">
                <div class="left">
                  <div class="spanWrap">
                    <span class="spanSlow">Pain Past</span>
                  </div>
                </div>
                <div class="right">
                  <div class="spanWrap">
                    <span class="spanSlow">Pain Past</span>
                  </div>
                </div>
              </div>
              <div class="line">
                <div class="left">
                  <div class="spanWrap">
                    <span class="spanFast">is pleasure.</span>
                  </div>
                </div>
                <div class="right">
                  <div class="spanWrap">
                    <span class="spanFast">is pleasure.</span>
                  </div>
                </div>
              </div>
              <div class="line">
                <div class="left">
                  <div class="spanWrap">
                    <span class="spanSlow">지나간 고통은</span>
                  </div>
                </div>
                <div class="right">
                  <div class="spanWrap">
                    <span class="spanSlow">지나간 고통은</span>
                  </div>
                </div>
              </div>
              <div class="line">
                <div class="left">
                  <div class="spanWrap">
                    <span class="spanFast">쾌락이다.</span>
                  </div>
                </div>
                <div class="right">
                  <div class="spanWrap">
                    <span class="spanFast">쾌락이다.</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>
    <!-- //main -->
  
    <footer>
        <!-- 모달 박스 내용 들어갈 곳. 길어지므로 생략. -->
    </footer>
    <!-- //footer -->
  </body>

CSS 소스

.mouse__cursor.active에서 마우스 커서가 텍스트 위에 올라왔을 때 크기를 5배로 설정해준다. 공통/초기화 CSS 소스는 하단의 [CSS 소스 보기]버튼을 클릭하여 볼 수 있다.

<style>
  /* mouseType */
  .mouse__wrap {
    color: #fff;
    width: 100%;
    height: 100vh;
    cursor: none;
  }
  .mouse__img {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: -1;
  }
  .mouse__text {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -20%);
    font-size: 3vw;
    line-height: 1.5;
  }
  .mouse__text .line {
    width: 100%;
    display: flex;
  }
  .mouse__text .line .left {
    width: 50vw;
    color: orange;
    overflow: hidden;
    transform: skew(0deg, -15deg);
  }
  .mouse__text .line .left .spanWrap {
    width: 100vw;
    text-align: center;
  }
  .mouse__text .line .right {
    width: 50vw;
    overflow: hidden;
    transform: skew(0deg, 15deg);
  }
  .mouse__text .line .right .spanWrap {
    width: 100vw;
    text-align: center;
    transform: translateX(-50vw);
  }
  .mouse__text span {
    display: inline-block;
  }
  .mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    z-index: 9999;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.9);
    user-select: none;
    pointer-events: none;
    mix-blend-mode: difference;
    transition: transform 0.3s;
  }
  .mouse__cursor.active {
    transform: scale(5);
  }
</style>

JS 소스

<script>
  const mouseMove = (e) => {
    let positionSlow = (e.pageX - window.innerWidth / 2) * 0.1;
    let positionFast = (e.pageX - window.innerWidth / 2) * 0.2;

    gsap.to(".spanSlow", {duration: 0.4, x: positionSlow});
    gsap.to(".spanFast", {duration: 0.4, x: -positionFast});
    gsap.to(".mouse__cursor", {duration: 0.3, left: e.pageX - 5, top: e.pageY - 5});
  }
  window.addEventListener("mousemove", mouseMove);

  // 텍스트 위에 마우스 커서 올라왔을 때 커서 크기 5배로 키우기
  
  const text = document.querySelectorAll(".spanSlow");
  const text2 = document.querySelectorAll(".spanFast");
  
  text.forEach((e) => {
    e.addEventListener("mouseenter", () => {
      document.querySelector(".mouse__cursor").classList.add("active");
    });
    e.addEventListener("mouseleave", () => {
      document.querySelector(".mouse__cursor").classList.remove("active");
    });
  });
  text2.forEach((e) => {
    e.addEventListener("mouseenter", () => {
      document.querySelector(".mouse__cursor").classList.add("active");
    });
    e.addEventListener("mouseleave", () => {
      document.querySelector(".mouse__cursor").classList.remove("active");
    });
  });
</script>

결과

원본(HTML/JS) 소스 보기

CSS 소스 보기

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

[Mouse Effect] 마우스 이펙트 05 - 기울기 효과 / 글씨 반전 효과 (3)	2022.09.28
[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 Efffect] 마우스 이펙트 06

마우스 이펙트 06 : 텍스트 효과

HTML 소스

CSS 소스

JS 소스

결과

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

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바

[Mouse Efffect] 마우스 이펙트 06

마우스 이펙트 06 : 텍스트 효과

HTML 소스

CSS 소스

JS 소스

결과

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

관련글

댓글

Reference Book

JavaScript

HTML

CSS

티스토리툴바