이코노트허브(econotehub) 노하우 연구소

안녕하세요 이코노트허브 입니다.

지난 글에서 만든 페이드인 효과는 페이지가 열리는 순간에만 실행되고 끝났습니다. 그런데 글이 길어지면, 스크롤을 한참 내려야 나오는 내용은 이 효과를 전혀 못 보고 지나가게 됩니다. 오늘은 스크롤해서 화면에 들어올 때마다 요소가 나타나는 효과를 만들어보겠습니다.

Intersection Observer란?

어떤 요소가 화면(뷰포트)에 들어왔는지, 나갔는지를 자바스크립트가 자동으로 감지하게 해주는 기능입니다. "스크롤 이벤트를 계속 감시하면서 위치를 계산"하는 예전 방식보다 훨씬 가볍고 성능이 좋습니다.

기본 구조

<style>
.fade-target {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s, transform 0.6s;
}

.fade-target.visible {
  opacity: 1;
  transform: translateY(0);
}
</style>

<p class="fade-target">스크롤하면 나타나는 문단입니다.</p>

<script>
const targets = document.querySelectorAll('.fade-target');

const observer = new IntersectionObserver((entries) => {
  entries.forEach((entry) => {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
    }
  });
});

targets.forEach((target) => observer.observe(target));
</script>

동작 원리를 하나씩 풀어보면 이렇습니다.

CSS 부분: .fade-target은 평소엔 투명하고 살짝 아래에 위치합니다. .visible 클래스가 붙으면 원래 위치로 돌아오며 나타납니다.
자바스크립트 부분: IntersectionObserver가 지정한 요소들을 감시하다가, 화면에 들어오는 순간(isIntersecting이 true) visible 클래스를 붙여줍니다.

블로그 글에 적용하는 법

모든 문단에 일일이 클래스를 붙이는 건 번거로우니, 강조하고 싶은 이미지나 소제목에만 class="fade-target"을 추가하는 걸 추천합니다.

<h2 class="fade-target">[중요한 소제목]</h2>
<div class="fade-target">
  <img src="이미지주소.jpg" alt="설명">
</div>

여러 요소가 순서대로 나타나게 하기

목록 항목처럼 여러 개가 동시에 나타나면 다소 어수선할 수 있습니다. 아래처럼 CSS로 약간의 시차를 주면 하나씩 순서대로 나타나 훨씬 자연스럽습니다.

.fade-target:nth-child(1) { transition-delay: 0s; }
.fade-target:nth-child(2) { transition-delay: 0.15s; }
.fade-target:nth-child(3) { transition-delay: 0.3s; }

transition-delay는 전환이 시작되기까지 기다리는 시간입니다. 항목마다 0.15초씩 차이를 주면, 위에서부터 순서대로 나타나는 느낌을 줍니다.

초보자가 자주 하는 실수 2가지

한 번 나타난 요소가 다시 사라지길 기대하는 경우: 위 코드는 한 번 visible이 붙으면 계속 유지됩니다. 스크롤을 위로 올렸다가 다시 내릴 때마다 반복해서 나타나게 하려면, isIntersecting이 false일 때 visible을 제거하는 코드를 추가해야 하지만, 대부분의 블로그에서는 한 번만 나타나는 편이 자연스럽습니다.
스크립트 위치를 잘못 넣는 경우: document.querySelectorAll이 실행되는 시점에 아직 해당 요소들이 화면에 로드되지 않았다면 아무것도 감지하지 못합니다. 스크립트는 감시하려는 요소들보다 아래쪽에 위치시키는 것이 안전합니다.

핵심 요약

Intersection Observer는 요소가 화면에 들어오는 순간을 자동으로 감지하는 기능입니다.
CSS로 평소 상태(투명·이동)와 .visible 상태(원래 모습)를 정의하고, 자바스크립트가 스크롤에 맞춰 클래스를 붙여줍니다.
transition-delay로 여러 요소에 시차를 주면 순서대로 나타나는 효과를 만들 수 있습니다.
스크립트는 감시할 요소들보다 아래쪽에 배치해야 정상 작동합니다.

지난 글의 페이드인 효과가 "처음 한 번"이었다면, 이번 효과는 "읽는 내내" 살아있는 느낌을 줍니다. 긴 글일수록 효과가 더 두드러지니, 리뷰나 가이드형 포스트에 적용해보시길 추천드립니다.

제목 없음