[아임웹 코드] Hover 텍스트 변환 애니메이션

시연 동영상 보기

<div class="texteffect">

<div class="container">

  <h1 class="textanima">텍스트<span class="spantag">애니메이션</span></h1>

  <h1 class="textanima">아임웹 코드 위젯을<span class="spantag">활용하여</span></h1>

  <h1 class="textanima">다양한 텍스트<span class="spantag">애니메이션을</span></h1>

  <h1 class="textanima">여러분의 홈페이지에<span class="spantag">적용하실 수 있습니다.</span></h1>

  <h1 class="textanima">커스텀 문의는 홈페이지 우측 하단<span class="spantag"><a class="atag" href="https://m-apping.com/57" target="_blank">톡상담을 통해 문의주세요</a></span></h1>

</div>

</div>

<style>

  .texteffect {

  margin: 0;

  padding: 0;

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

  background-color: #0D0D0D;

  margin: 10%;

}

.container {

  display: flex;

  flex-direction: column;

  justify-content: center;

  align-items: flex-start;

  height: 200vh;

}

.textanima {

  font-size: 10vw;

  letter-spacing: -.01em;

  line-height: 100%;

  margin: 0;

  width: 100%;

  color: rgb(182, 182, 182, 0.2);

  background: linear-gradient(to right, #b6b6b6, #b6b6b6) no-repeat;

  -webkit-background-clip: text;

  background-clip: text;

  background-size: 0%;

  transition: background-size cubic-bezier(.1,.5,.5,1) 0.5s;

  border-bottom: 1px solid #2F2B28;

  display: flex;

  flex-direction: column;

  align-items: flex-start;

  justify-content: center;

  position: relative;

}

.spantag {

  position: absolute;

  width: 100%;

  height: 100%;

  background-color: #1A6DFF;

  color: #0D0D0D;

  clip-path: polygon(0 50%, 100% 50%, 100% 50%, 0 50%);

  transform-origin: center;

  transition: all cubic-bezier(.1,.5,.5,1) 0.4s;

  display: flex;

  flex-direction: column;

  justify-content: center;

}

.textanima:hover > span {

  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);

}

.atag {

  text-decoration: none;

  color: inherit;

}

</style>

<script>

  gsap.registerPlugin(ScrollTrigger);

const textElements = gsap.utils.toArray('.textanima');

textElements.forEach(text => {

  gsap.to(text, {

    backgroundSize: '100%',

    ease: 'none',

    scrollTrigger: {

      trigger: text,

      start: 'center 80%',

      end: 'center 20%',

      scrub: true,

    },

  });

});

</script>