나눔웹 UI/UX 꿀팁
스크롤 등장 애니메이션 만들기, IntersectionObserver로 가볍게 처리하는 법
스크롤을 내릴 때 카드와 문구가 하나씩 떠오르는 스크롤 등장 애니메이션은 IntersectionObserver 하나로 가볍게 만들 수 있습니다.
무거운 플러그인 없이 CSS 클래스 하나만 붙였다 떼는 방식이라, 모바일에서도 버벅임이 거의 없습니다.
💡 scroll 이벤트로 만들면 왜 느려질까요?
스크롤 이벤트는 손가락을 움직이는 동안 쉬지 않고 발생합니다. 그때마다 요소 위치를 getBoundingClientRect()로 계산하면 브라우저가 레이아웃을 계속 다시 재게 되고, 저사양 폰에서는 화면이 끊깁니다. IntersectionObserver는 요소가 화면에 들어오는 순간만 브라우저가 알려 주기 때문에 이런 계산이 필요 없습니다.
1. CSS로 등장 전·후 상태 정해 두기
움직임은 CSS의 transition이 맡고, 스크립트는 is-visible 클래스만 붙입니다. 여기서 중요한 건 .js가 붙었을 때만 숨긴다는 점입니다. 스크립트가 늦게 뜨거나 오류가 나도 내용이 투명한 채로 남지 않습니다.
/* JS가 동작할 때만 숨겨 둡니다 */
.js .reveal {
opacity: 0;
transform: translateY(24px);
transition: opacity .6s ease,
transform .6s ease;
}
.js .reveal.is-visible {
opacity: 1;
transform: none;
}
/* 움직임 줄이기 설정 사용자 배려 */
@media (prefers-reduced-motion: reduce) {
.js .reveal {
transform: none;
transition: opacity .3s;
}
}2. IntersectionObserver로 클래스 붙이기
threshold: 0.15는 요소가 15% 정도 보였을 때 실행하라는 뜻이고, rootMargin의 아래쪽 -10%는 화면 맨 끝에 살짝 걸쳤을 때가 아니라 조금 더 올라왔을 때 나타나게 해 줍니다. 한 번 나타난 요소는 unobserve로 감시를 끝내야 위아래로 스크롤할 때마다 깜빡이지 않습니다.
<script>
/* head 안에서 가장 먼저 실행 */
document.documentElement.classList.add('js');
</script>
/* 본문 끝에서 실행 */
const io = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (!entry.isIntersecting) return;
entry.target.classList.add('is-visible');
io.unobserve(entry.target); // 한 번만
});
}, {
threshold: 0.15,
rootMargin: '0px 0px -10% 0px'
});
document.querySelectorAll('.reveal')
.forEach((el) => io.observe(el));3. 실무에서 자주 놓치는 부분
- 첫 화면 메인 배너에는 걸지 마세요. 처음부터 보이는 영역을 투명하게 시작하면 화면이 늦게 뜬 것처럼 보이고, LCP 같은 속도 지표에도 좋지 않습니다.
- 모든 요소에 다 넣지 마세요. 섹션 제목과 대표 카드 정도만 움직여도 충분합니다. 문단마다 떠오르면 글을 읽기가 오히려 불편합니다.
- 카드가 여러 개라면 순서대로.
transition-delay를 0.1초 간격으로 주면 한꺼번에 튀어나오는 느낌이 줄어듭니다. - CSS만으로 하는 방법도 있습니다.
animation-timeline: view()를 쓰는 스크롤 연동 애니메이션은 크롬 계열부터 지원이 시작됐지만 아직 모든 브라우저에서 되지는 않아, 고객사 사이트에는 위 방식을 기본으로 씁니다.
"움직임은 내용을 돋보이게 할 때까지만 넣습니다."
나눔웹은 화려함보다 끝까지 읽히는 화면을 기준으로 애니메이션을 설계합니다.
보기 좋으면서도 가벼운 사이트, 함께 고민하겠습니다.