마우스 이펙트 02

The future depends on what we do in the present.

미래는 현재 우리가 무엇을 하는가에 달려 있다.

소스 보기

Javascript

HTML

CSS

<script>
  const cursor = document.querySelector(".mouse__cursor");
  const cursor2 = document.querySelector(".mouse__cursor2");
  const span = document.querySelectorAll(".mouse__wrap span")

  window.addEventListener("mousemove", e => {
      // 커서 좌표값 할당
      // cursor.style.left = e.pageX -5+ "px";
      // cursor.style.top = e.pageY -5+ "px";
      // cursor2.style.left = e.pageX -15+ "px";
      // cursor2.style.top = e.pageY -15+ "px";

      // GSAP
      gsap.to(cursor, {duration: 0.3, left: e.pageX -5, top:e.pageY -5});
      gsap.to(cursor2, {duration: 0.8, left: e.pageX -15, top:e.pageY -15});

      // 오버 효과
      // mouseenter / mouseover / 이벤트 버블링
      span.forEach(span => {
          span.addEventListener("mouseenter", () => {
              cursor.classList.add("active");
              cursor2.classList.add("active");
          });
          span.addEventListener("mouseleave", () => {
              cursor.classList.remove("active");
              cursor2.classList.remove("active");
          });
      });
  });
</script>

<header id="header">
  <h1>JAVASCRIPT MOUSE EFFECT 02</h1>
  <p>마우스 이펙트 - 마우스 따라다니기(GSAP)</p>
  <ul>
      <li><a href="mouseEffect01.html">01</a></li>
      <li class="active"><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><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__cursor2"></div>

  <div class="mouse__wrap">
    <p><span class="style1">The future</span> depends on <span class="style2">what we do</span> in the <span class="style3">present</span>.</p>
    <p><span class="style4">미래</span>는 <span class="style5">현재</span> 우리가 <span class="style6">무엇을 하는가</span>에 달려 있다.</p>
  </div>
</section>
</main>
<!-- //main -->

<footer> 
</footer> 
<!-- //footer -->

<style>  
  .mouse__cursor {
    position: absolute;
    left: 0;
    top: 0;
    width: 10px;
    height: 10px;
    z-index: 9999;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s;
  }
  .mouse__cursor2 {
    position: absolute;
    left: 0;
    top: 0;
    width: 30px;
    height: 30px;
    z-index: 9998;
    border-radius: 50%;
    background: rgba(255,255,255,0.3);
    user-select: none;
    pointer-events: none;
    transition: transform 0.3s, opacity 0.2s;
  }
  .mouse__cursor.active {
    transform: scale(0);
  }
  .mouse__cursor2.active {
    transform: scale(5);
    background: rgba(255,166,0,0.6);
  }
</style>