스크롤 연동 애니메이션 설정하기
요소가 뷰포트에 들어올 때 CSS 애니메이션 시작하기
스크롤 연동 애니메이션 설정하기은(는) CoddyKit의 무료 HTML Academy 강의입니다. 이것은 4개 중 4번째 강의입니다. 아래에서 전체 강의를 무료로 읽을 수 있으며, 내장 코드 에디터와 24/7 AI 튜터와 함께 브라우저에서 직접 실습할 수 있습니다. 이 강의는 HTML Academy 학습 경로의 일부이며, 진행 상황이 웹과 CoddyKit 앱에 동기화됩니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
목표
스크롤 연동 애니메이션은 요소의 가시성에 따라 재생, 일시 중지 또는 역재생됩니다. 예를 들어 섹션이 화면에 들어올 때 히어로 영역이 페이드인되거나, 보이는 동안 숫자가 올라가거나, 스크롤 위치에 맞춰 패럴랙스 효과가 적용됩니다. IntersectionObserver가 애니메이션을 트리거하고 CSS 또는 Web Animations API가 애니메이션을 실행합니다.
트리거 기반 애니메이션
가장 간단한 패턴은 요소가 뷰포트에 들어올 때 애니메이션을 포함한 CSS 클래스를 추가하는 것입니다. 옵저버 콜백에서 entry.target.classList.add("in-view")를 호출하고, 해당 클래스에서 animation: fade-in 600ms forwards를 정의합니다.
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view {
animation: fadeUp 600ms cubic-bezier(.2,.8,.2,1) forwards;
}
@keyframes fadeUp {
to { opacity: 1; transform: none; }
}옵저버 설정
공유 observer를 만들고 트리거 클래스를 가진 모든 요소를 관찰한 다음, 교차가 감지되면 "in-view"를 추가하고 다시 트리거되지 않도록 unobserve를 호출합니다. 한 번만 실행되는 애니메이션에는 이것으로 충분합니다. 다시 들어올 때 반복하려면 unobserve를 호출하지 말고, 요소가 화면에서 나갈 때 클래스를 제거하십시오.
const observer = new IntersectionObserver((entries) => {
for (const entry of entries) {
if (entry.isIntersecting) {
entry.target.classList.add("in-view");
observer.unobserve(entry.target);
}
}
}, { threshold: 0.2 });
document.querySelectorAll(".fade-up").forEach((el) => observer.observe(el));순차 지연 효과
목록을 순차적으로 표시하려면 CSS 사용자 지정 속성을 통해 항목별 지연 시간을 적용하십시오. 각 항목에 style="--delay: ${i * 100}ms"를 지정하고, 애니메이션에서 animation-delay: var(--delay)를 읽게 합니다. 목록이 화면에 들어오면 항목이 계단식으로 애니메이션됩니다.
더 이른 트리거를 위한 임계값
threshold: 0.2는 요소의 20%가 표시될 때 실행되므로, 보통 "in-view" 애니메이션을 시작하기에 좋은 시점입니다. threshold: 0은 픽셀 하나만 보여도 실행되어 너무 이르고 갑작스럽게 보이며, threshold: 1은 완전히 표시된 뒤에 실행되어 너무 늦고 지연된 느낌을 줍니다.
스크롤 연동 방식과 스크롤 트리거 방식
스크롤 트리거 애니메이션은 교차가 감지될 때 한 번 재생됩니다(앞에서 설명한 방식입니다). 스크롤 연동 애니메이션은 스크롤 위치에 맞춰 진행률이 함께 변합니다. 최신 방식은 CSS 스크롤 구동 애니메이션(animation-timeline: scroll())을 사용하는 것이며, IntersectionObserver는 트리거 영역에 들어오거나 나가는 동작을 감지할 때 여전히 유용합니다.
레이아웃 과도한 재계산 방지
GPU가 부담 적게 변환할 수 있는 transform과 opacity 속성을 애니메이션화하십시오. top, left, width, height를 애니메이션화하면 매 프레임마다 레이아웃이 트리거되므로 피해야 합니다. 그러지 않으면 중급 기기에서 스크롤 연동 애니메이션이 끊길 수 있습니다.
동작 감소 설정 존중
애니메이션 선언을 @media (prefers-reduced-motion: no-preference)로 감싸서, 동작 감소를 요청한 사용자(전정 장애가 있거나 움직임에 민감한 사용자)가 움직임 없이 정적인 최종 상태를 보도록 하십시오. 장식용 애니메이션은 동작 감소 설정에서는 완전히 비활성화해야 합니다.
.fade-up { opacity: 1; transform: none; }
@media (prefers-reduced-motion: no-preference) {
.fade-up { opacity: 0; transform: translateY(20px); }
.fade-up.in-view { animation: fadeUp 600ms forwards; }
}성능 패턴
요소마다 하나씩 만들지 말고 공유 observer 하나를 사용하십시오. 한 번만 실행되는 애니메이션이 실행되면 unobserve를 호출하십시오. will-change는 현재 애니메이션이 실행 중인 요소에만 제한적으로 사용하고, 애니메이션이 끝나면 제거하십시오. 삭제된 프레임이 있는지 Performance 패널에서 확인하십시오.
양방향 애니메이션
요소가 뷰포트에서 나갈 때 애니메이션이 역재생되어야 한다면 unobserve를 호출하지 마십시오. 콜백에서 isIntersecting에 따라 클래스를 전환하십시오. entry.target.classList.toggle("in-view", entry.isIntersecting)를 사용하면 요소가 들어올 때 애니메이션이 정방향으로 실행되고, 나갈 때 역재생됩니다.
Web Animations API와 결합하기
JS로 구동하는 애니메이션에서는 classList.add를 entry.target.animate(keyframes, options)로 바꾸십시오. WAAPI는 일시 중지, 역재생 또는 프로미스를 통한 연결이 가능한 Animation 객체를 반환하므로, 복잡한 순서의 애니메이션에는 CSS보다 유연합니다.
지식 확인
스크롤 연동 애니메이션에서 top/left/width/height보다 transform과 opacity를 애니메이션화하는 이유는 무엇입니까?
요약
스크롤 연동 애니메이션은 IntersectionObserver를 CSS 애니메이션 클래스 또는 WAAPI와 결합합니다. 숨겨진 상태를 설정하고, 교차가 감지되면 "in-view"를 추가하며, top/left가 아닌 transform과 opacity를 애니메이션화하고 prefers-reduced-motion을 존중하십시오. CSS 사용자 지정 속성으로 지연 시간을 다르게 지정해 계단식 표시를 구현할 수 있습니다. 전체 스크롤 진행률 애니메이션에는 기본 스크롤 구동 애니메이션(animation-timeline: scroll())을 고려하십시오.
자주 묻는 질문
“스크롤 연동 애니메이션 설정하기” 강의는 무료인가요?
네 — “스크롤 연동 애니메이션 설정하기” 전체 내용을 이 웹사이트에서 무료로 읽을 수 있습니다. 인터랙티브하게 실습하려면(내장 코드 에디터와 24/7 AI 튜터), CoddyKit PRO로 업그레이드하면 HTML Academy 강의 전체를 잠금 해제할 수 있습니다. HTML Academy 강의에는 총 4개의 강의가 포함되어 있습니다.
“스크롤 연동 애니메이션 설정하기”에서 뭘 배우나요?
요소가 뷰포트에 들어올 때 CSS 애니메이션 시작하기 브라우저에서 직접 실행하는 실습 코드로 HTML Academy을(를) 배우며, 24/7 AI 튜터가 강의를 진행하면서 질문에 답변해줍니다.
HTML Academy을(를) 시작하는 데 경험이 필요한가요?
사전 경험은 필요하지 않습니다. CoddyKit의 HTML Academy은(는) 초급자부터 고급 학습자까지를 위해 구성되어 있으므로, 여기서 시작하거나 처음부터 시작할 수 있으며 자신의 속도대로 진행할 수 있습니다. 이것은 4개 중 4번째 강의입니다.
“스크롤 연동 애니메이션 설정하기” 강의는 얼마나 걸리나요?
대부분의 CoddyKit 강의는 약 5~10분이 소요됩니다. 각 강의는 간결하고 인터랙티브하여 꾸준한 진행이 가능하며, 웹과 앱에서 중단한 부분부터 바로 시작할 수 있습니다.
이 HTML Academy 강의에서 코드를 작성하고 실행할 수 있나요?
네. 모든 HTML Academy 강의에는 내장 코드 에디터가 포함되어 있으므로, 브라우저에서 바로 실제 코드를 작성하고 실행한 후 즉시 AI 피드백을 받을 수 있습니다 — 로컬 설정이 필요 없습니다.