[해피CGI][cgimall] 마우스 따라다니는 텍스트 효과

마우스를 따라다니는 텍스트 애니메이션 효과입니다.
웹페이지를 좀 더 역동적이고 매력적으로 만들 수 있습니다.

 

HTML 구조

<div class="cursor">

  <div class="text">move</div>

  <div class="text">move</div>

  <div class="text">move</div>

  <div class="text">move</div>

  <div class="text"><span>move</span></div>

</div>

CSS 소스

html, body {

  margin: 0;

  padding: 0;

  width: 100%;

  height: 100vh;

  background: #161616;

  overflow: hidden;

}

 

.text {

  position: absolute;

  pointer-events: none;

  font-family: venn-extended, sans-serif;

  font-weight: 700;

  font-style: normal;

  font-size: 6em;

  -webkit-text-stroke: 1px #fff;

  /*font-weight: 500;

  text-transform: uppercase;*/

  color: #161616;

}

 

.text span {

  color: #fff;

}

 

.center {

  position: absolute;

  top: 50%;

  left: 50%;

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

}

JS 소스

document.addEventListener("mousemove", e => {

  gsap.to(".text", {

    x: e.clientX,

    y: e.clientY,

    stagger: { // wrap advanced options in an object

      each: -0.02,

      ease: "power2.inOut",

    }

  })

})

구현된 화면은 사이트에서 확인 가능합니다.