텍스트 등장 애니메이션 구현하기(Text Reveal Animation on Scroll using HTML, CSS, JavaScript)

 

 

이번 포스팅에서는 아래에서 위로 등장하는 텍스트 애니메이션을 구현해봅시다.

 

처음에는 HTML과 CSS만으로 애니메이션을 만들고,

이후에 자바스크립트를 사용해서 스크롤에 반응하도록 만들어볼 것입니다.

 

예제를 살펴볼까요?

 

 

 

 

HTML은 간단합니다

<h2 class="title content">
  <span class="letter">Reveal Animation</span>
</h2>

 

 

 

 

CSS 스타일링을 해봅시다

우선 content 요소에 overflow를 hidden으로 주어서 넘치는 부분이 잘리도록 만듭니다.

.content {
  word-spacing: 2px;
  overflow: hidden;
}

 

 

@keyframes 키워드를 사용해 reveal 애니메이션을 정의합니다.

처음에는 translateY를 100%로 주어 letter 요소가 아래에서 시작되도록 만들 것입니다.

그리고 100%가 됐을 때 0으로 변경하여 원래 위치로 돌려놓습니다.

@keyframes reveal {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

 

 

그 다음 letter 요소에 만든 애니메이션을 적용해줄 거예요.

지속 시간은 1s, forwards로 설정하여 한번만 실행되게 만듭니다.

 

이때 cubic-bezier를 사용해서 전환 효과를 줄 것입니다.

.letter {
  display: inline-block;
  animation: reveal 1s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

 

 

easing 효과를 쉽게 만들어주는 사이트를 확인해보세요.

저는 easeInOutQuart 효과를 선택했어요.

 

Ceaser - CSS Easing Animation Tool - Matthew Lein

 

 

 

 

✨ 완성된 코드를 확인하세요.

See the Pen text reveal animation by cona-tus (@cona-tus) on CodePen.

 

 

 

 

 

스크롤에 반응하도록 만들어요

 

이번엔 자바스크립트를 사용하여 스크롤에 반응하도록 만들어봅시다.

뷰포트에 요소가 등장하면 우리가 만든 등장 애니메이션을 적용해줄 것입니다.

 

HTML을 작성해봅시다

사용자 정의 data-* 속성을 사용해 등장이 지연되도록 delay 시간을 설정합니다.

<section class="container">
  <article class="article">
    <h2 class="title">
      <span class="letter">Hello, There!</span>
    </h2>
    <p class="text"> Aspernatur, blanditiis consequatur! Accusamus nulla omnis maxime ea praesentium, magni, vel, molestias ducimus quibusdam voluptatibus qui corporis debitis repudiandae rerum voluptatum quod. Odit illum asperiores consequuntur iusto consectetur, cum voluptas!
      Quas asperiores, atque pariatur maxime quam, in et nostrum praesentium obcaecati illo temporibus! Aliquam necessitatibus voluptate earum dolorum blanditiis autem architecto, odit optio debitis natus dicta modi ut vel ducimus.</p>
  </article>
  <article class="article">
    <h2 class="title"> <span class="letter">Hello, There!</span></h2>
    <h2 class="title"> <span class="letter delay" data-delay="0.3">Hello, There!</span></h2>
    <h2 class="title"> <span class="letter delay" data-delay="0.6">Hello, There!</span></h2>
  </article>
  <article class="article">
    <h2 class="title"> <span class="letter">Hello, There!</span></h2>
    <p class="text"> Aspernatur, blanditiis consequatur! Accusamus nulla omnis maxime ea praesentium, magni, vel, molestias ducimus quibusdam voluptatibus qui corporis debitis repudiandae rerum voluptatum quod. Odit illum asperiores consequuntur iusto consectetur, cum voluptas!
      Quas asperiores, atque pariatur maxime quam, in et nostrum praesentium obcaecati illo temporibus! Aliquam necessitatibus voluptate earum dolorum blanditiis autem architecto, odit optio debitis natus dicta modi ut vel ducimus.</p>
  </article>
</section>

 

 

 

 

CSS는 이렇게

우선 위에서처럼 title 요소에 overflow를 hidden으로 주겠습니다.

.title {
  margin: 0 0 1rem;
  font-size: 2.5rem;
  word-spacing: 2px;
  overflow: hidden;
}

 

 

그리고 title 요소 내부의 letter 요소는 처음에 보이지 않도록 만들기 위해 opacity와 translateY를 미리 설정합니다.

 

그다음 article 요소가 보이면 show 클래스를 붙여줄 것입니다.

article이 show 상태가 되면 letter 요소에 애니메이션을 적용합시다.

.letter {
  opacity: 0;
  transform: translateY(100%);
}

.article.show .letter {
  display: inline-block;
  opacity: 1;
  animation: reveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes reveal {
  0% {
    transform: translateY(100%);
  }
  100% {
    transform: translateY(0);
  }
}

 

 

 

 

자바스크립트를 작성해봐요

스크롤에 반응하게 만들기 위해서 Intersection Observer API를 사용합니다.

 

article 요소가 뷰포트에 있는지 없는지 감지하고,

화면에 보인다면 article 요소에 show 클래스를 붙이고,

화면에 없다면 show 클래스를 제거합니다.

const articles = document.querySelectorAll(".article");

const articleObserver = new IntersectionObserver((entries, observer) => {
  entries.forEach(entry => {
    if (entry.isIntersecting) {
      entry.target.classList.add('show');
    } else {
      entry.target.classList.remove('show');
    }
  });
}, { threshold: 0.3 });

articles.forEach(article => {
  articleObserver.observe(article);
});

 

 

이제 텍스트가 순차적으로 등장하도록 만들어봅시다.

  <article class="article">
    <h2 class="title"> <span class="letter">Hello, There!</span></h2>
    <h2 class="title"> <span class="letter delay" data-delay="0.3">Hello, There!</span></h2>
    <h2 class="title"> <span class="letter delay" data-delay="0.6">Hello, There!</span></h2>
  </article>

 

 

delay 요소들을 모두 불러오고, getAttribute를 사용해 각 요소마다 부여된 data-delay 값을 가져옵니다.

그리고 delayTime을 적용해서 동적으로 스타일을 변경합니다.

const delays = document.querySelectorAll('.delay');

delays.forEach((delay) => {
  const delayTime = delay.getAttribute("data-delay");
  delay.style.animationDelay = `${delayTime}s`
})

 

 

 

 

✨ 완성된 코드를 확인하세요

See the Pen text reveal animation on scroll by cona-tus (@cona-tus) on CodePen.