스크롤 텍스트 나타나는 효과 구현 방법

스크롤 하면서 자연스럽게 텍스트가 서서히 나타나는 웹 효과를 구현해 보세요. Intersection Observer와 CSS 애니메이션을 조합해 부드럽고 세련된 사용자 경험을 제공합니다. 초보자도 쉽게 적용할 수 있는 예제로 설명합니다.

스크롤 텍스트 나타나는 효과 구현 방법

예제 HTML

<section class="fade-section">
  <h2 class="fade-in">나타나는 텍스트</h2>
  <p class="fade-in">이 문장은 스크롤 시 서서히 나타납니다.</p>
</section>

<section class="fade-section">
  <h2 class="fade-in">나타나는 텍스트</h2>
  <p class="fade-in">이 문장은 스크롤 시 서서히 나타납니다.</p>
</section>

HTML

예제 CSS

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.fade-in.show {
  opacity: 1;
  transform: translateY(0);
}

CSS

예제 JAVASCRIPT

<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>

<script>
  const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        entry.target.classList.add('show');
      }
    });
  }, { threshold: 0.1 });

  document.querySelectorAll('.fade-in').forEach(el => observer.observe(el));
</script>

JavaScript

예제 실행

나타나는 텍스트

이 문장은 스크롤 시 서서히 나타납니다.

스크롤 텍스트 나타나는 효과는 웹 페이지에서 해당 영역까지 스크롤 되어 화면에 보이기 시작하면 해당 글자가 아래쪽에서 위쪽으로 서서히 나타나게 하는 효과입니다. 이건 기본적인 예제 코드므로, 다양한 곳에 적용할 수 있습니다. 예를 들면 슬라이드 이미지 위에 글자에 이와 같은 효과를 주면 조금 더 살아있는 느낌을 전달 할 수 있습니다.