스크롤할 때 요소가 부드럽게 등장하는 인터랙션은 사용자 주목도를 높이고 사이트의 완성도를 끌어올림. 핵심은 Intersection Observer API를 이용해 스크롤 이벤트 없이도 효율적으로 구현하는 것임.

<section class="fade-section">스크롤 시 나타나는 콘텐츠</section>
<section class="fade-section">두 번째 섹션</section>
<section class="fade-section">세 번째 섹션</section>

.fade-section {
opacity: 0;
transform: translateY(30px);
transition: all 0.6s ease;
}
.fade-section.show {
opacity: 1;
transform: translateY(0);
}

const options = { threshold: 0.2 };
const observer = new IntersectionObserver((entries, obs) => {
entries.forEach(entry => {
if(entry.isIntersecting){
entry.target.classList.add('show');
obs.unobserve(entry.target); // 한 번만 실행
}
});
}, options);

document.querySelectorAll('.fade-section').forEach(el => observer.observe(el));

스크롤 이벤트 대신 IntersectionObserver를 사용하면 성능 저하 없이 깔끔하게 구현 가능.

threshold는 화면에 몇 % 보였을 때 애니메이션을 시작할지 결정.

.show 클래스에 원하는 트랜지션 효과를 다양하게 줄 수 있음 (예: slide-in, scale-up 등).

라이브러리 사용 시엔 GSAP의 ScrollTrigger를 이용하면 훨씬 더 정교한 타이밍 조정 가능.

이렇게 하면 스크롤 위치에 따라 자연스럽게 콘텐츠가 등장하는 고급 인터랙션을 만들 수 있음.