스크롤 애니메이션 만드는 법
페이지가 살아 움직이게 하기

🎬 스크롤을 내리면 콘텐츠가 나타나는 사이트

좋은 사이트를 보면 스크롤할 때마다 콘텐츠가 아래에서 위로 부드럽게 올라온다. 처음엔 보이지 않다가 화면에 들어오는 순간 스르륵 나타난다. 뭔가 살아있는 느낌이다.

직접 만들어봤다. 생각보다 훨씬 간단했다. CSS 몇 줄과 JavaScript 열 줄이면 된다. AI한테 시키면 그보다도 빠르다.

🌊 스크롤 애니메이션이 뭔가요?

말 그대로 스크롤에 반응하는 애니메이션이다. 페이지를 처음 열면 화면 아래쪽 콘텐츠는 보이지 않는다. 스크롤을 내려서 그 요소가 화면에 들어오는 순간, 페이드인(서서히 나타남)이나 슬라이드업(아래에서 위로 올라옴) 효과가 실행된다.

효과는 단순하지만 사이트가 주는 느낌이 완전히 달라진다. 정적인 페이지가 살아있는 것처럼 보인다.

⚙️ 작동 원리 — IntersectionObserver

핵심은 IntersectionObserver라는 브라우저 내장 기능이다. 특정 요소가 화면(뷰포트)에 들어오거나 나갈 때 자동으로 알려준다. 스크롤 이벤트를 직접 감지하는 것보다 훨씬 성능이 좋다.

흐름은 이렇다.

• 애니메이션을 적용할 요소에 hidden 클래스를 붙여서 처음엔 숨겨둔다
• IntersectionObserver가 그 요소를 지켜보고 있다가 화면에 들어오는 순간 감지한다
• 감지되면 visible 클래스를 추가한다
• CSS에서 visible 클래스가 붙으면 애니메이션이 실행되도록 정의해둔다

JavaScript가 타이밍을 잡고, CSS가 실제 움직임을 담당하는 구조다.

🪜 만드는 순서

세 단계면 끝난다. AI한테 그대로 요청해도 된다.

실제 코드 예시

.scroll-hidden {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.scroll-hidden.visible {
  opacity: 1;
  transform: translateY(0);
}

const observer = new IntersectionObserver(function (entries) {
  entries.forEach(function (entry) {
    if (entry.isIntersecting) {
      entry.target.classList.add('visible');
      observer.unobserve(entry.target);
    }
  });
}, { threshold: 0.15 });

document.querySelectorAll('.scroll-hidden').forEach(function (el) {
  observer.observe(el);
});

⏱️ 속도와 딜레이 조정

transition 속도는 0.6초가 자연스럽다. 너무 빠르면 효과가 안 보이고, 너무 느리면 답답하게 느껴진다.

카드 여러 개가 한꺼번에 나타나면 어색하다. 각 요소마다 딜레이를 조금씩 다르게 주면 순서대로 등장하는 효과가 생긴다.

.card:nth-child(1) { transition-delay: 0s;    }
.card:nth-child(2) { transition-delay: 0.12s; }
.card:nth-child(3) { transition-delay: 0.24s; }

카드 세 개가 왼쪽부터 0.12초 간격으로 순서대로 등장하면 훨씬 자연스럽다. 간격이 너무 벌어지면 기다리는 느낌이 나니까 0.1~0.15초 정도가 적당하다.

📱 모바일에서도 작동하나?

작동한다. IntersectionObserver는 모바일 브라우저에서도 동일하게 지원된다. 터치 스크롤에도 그대로 반응한다.

별도로 모바일용 코드를 따로 작성할 필요가 없다. PC에서 만든 코드가 모바일에서도 그대로 돌아간다.

⚠️ 주의할 점

✅ 마무리 — 애니메이션 하나로 달라지는 완성도

스크롤 애니메이션은 기능이 아니라 인상이다. 같은 내용이라도 스르륵 나타나는 사이트가 훨씬 공들인 것처럼 보인다.

코드는 열 줄짜리다. AI한테 한 번 시키면 전체 페이지에 적용하는 데 5분도 안 걸린다. 사이트 완성도가 확 올라가는 체감이 크다. 안 해볼 이유가 없다.