[해피CGI][cgimall] 마우스 효과가 들어간 네비게이션 커서 이펙트 Navigation Cursor Effect

마우스 효과가 들어간 네비게이션 커서 이펙트입니다.

응용하여 다양하게 활용 가능합니다.

HTML 구조

<div class="nav-wrapper">

  <nav>

    <a href="#" class="link">

      <span>Home</span>

    </a>

    <a href="#" class="link">

      <span>Our Story</span>

    </a>

    <a href="#" class="link">

      <span>Studio</span>

    </a>

    <a href="#" class="link">

      <span>Contact</span>

    </a>

 

    <div class="cursor"></div>

  </nav>

</div>

 

CSS 소스

@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,750,700,800,900&display=swap');

 

body {

  margin: 0;

  padding: 0;

  cursor: none;

  font-family: 'Poppins', sans-serif;

}

 

.nav-wrapper {

  width: 100%;

  height: 100vh;

  background: #161616;

}

 

.nav-wrapper nav {

  display: flex;

  justify-content: space-around;

  width: 100%;

  margin: 0 auto;

  text-align: center;

  position: absolute;

  top: 50%;

}

 

.link {

  transition: all 0.3s ease;

}

 

.link span {

  display: inline-block;

  font-weight: bold;

  letter-spacing: 1px;

  color: #fff;

  font-size: 36px;

  text-transform: uppercase;

  pointer-event: none;

  transition: transform 0.1s linear;

}

 

.cursor {

  pointer-events: none;

  position: fixed;

  padding: 0.3rem;

  background-color: #fff;

  border-radius: 50%;

  mix-blend-mode: difference;

  transition: transform 0.3s ease;

}

 

.link:hover ~ .cursor {

  transform:translate(-50%, -50%) scale(8);

}

 

 

@media screen and (max-width: 1024px) { 

 

  .nav-wrapper nav {

    flex-direction: column;

  }

 

}

 

JS 소스

(function () {

 

      const link = document.querySelectorAll('nav > .link');

      const cursor = document.querySelector('.cursor');

 

      const animateit = function (e) {

            const span = this.querySelector('.link > span');

            const { offsetX: x, offsetY: y } = e,

            { offsetWidth: width, offsetHeight: height } = this,

 

            move = 25,

            xMove = x / width * (move * 2) - move,

            yMove = y / height * (move * 2) - move;

 

            span.style.transform = `translate(${xMove}px, ${yMove}px)`;

 

            if (e.type === 'mouseleave') span.style.transform = '';

      };

 

      const editCursor = e => {

            const { clientX: x, clientY: y } = e;

            cursor.style.left = x + 'px';

            cursor.style.top = y + 'px';

      };

 

      link.forEach(b => b.addEventListener('mousemove', animateit));

      link.forEach(b => b.addEventListener('mouseleave', animateit));

      window.addEventListener('mousemove', editCursor);

 

})();

해당 사이트로 이동해서 전체 소스를 확인하실 수 있습니다.