사용자가 페이지를 스크롤할 때 요소들이 부드럽게 등장하거나 위치·투명도 변화하는 효과.

실무에서는 주로 마케팅 랜딩 페이지나 제품 소개 페이지에 사용.

순수 CSS만으로 간단한 건 가능하지만, 정교한 효과는 JavaScript와 함께 사용.

<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>스크롤 애니메이션 예제</title>
<style>
body {
margin: 0;
font-family: sans-serif;
}
section {
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
font-size: 2rem;
}
.hidden {
opacity: 0;
transform: translateY(50px);
transition: all 0.6s ease-out;
}
.show {
opacity: 1;
transform: translateY(0);
}
</style>
</head>
<body>

<section style="background:#eee;">스크롤 해보세요 ↓</section>
<section class="hidden" style="background:#3498db; color:white;">첫 번째 등장!</section>
<section class="hidden" style="background:#e67e22; color:white;">두 번째 등장!</section>
<section class="hidden" style="background:#2ecc71; color:white;">세 번째 등장!</section>

<script>
const hiddenElements = document.querySelectorAll('.hidden');

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

hiddenElements.forEach(el => observer.observe(el));
</script>

</body>
</html>


동작 원리

.hidden 상태로 초기 투명도 0 + 아래쪽 위치에서 대기.

IntersectionObserver가 뷰포트 안에 들어온 요소를 감지.

.show 클래스를 붙여서 CSS 트랜지션으로 부드럽게 표시.

실무 팁

threshold 값 조절로 언제 등장할지 제어 가능 (0 = 살짝 보이자마자, 1 = 완전히 보여야).

같은 애니메이션을 반복하려면 unobserve() 대신 스크롤 때마다 클래스 토글 처리.

복잡한 애니메이션은 GSAP ScrollTrigger 같은 라이브러리를 쓰면 훨씬 편리.