웹사이트에서 스크롤 애니메이션은 사용자의 주의를 끌고, 인터랙티브한 경험을 제공하는 데 중요한 역할을 합니다. 이 글에서는 JavaScript 라이브러리를 사용하지 않고 순수 CSS와 인터섹션 옵저버(Intersection Observer) API를 활용해 스크롤 기반 애니메이션을 구현하는 방법을 설명합니다.
1. 스크롤 애니메이션의 중요성
스크롤 애니메이션은 다음과 같은 효과를 제공합니다:
- 사용자 경험 강화: 콘텐츠의 등장 방식에 따라 사용자는 더 흥미를 느낍니다.
- 중요 콘텐츠 강조: 특정 섹션이나 요소에 애니메이션을 추가해 더 눈에 띄게 할 수 있습니다.
- 브랜드 이미지 개선: 세련된 애니메이션 효과는 전문적인 인상을 줍니다.
2. 순수 CSS로 기본 스크롤 애니메이션 구현
CSS의 @keyframes와 animation 속성을 사용하면 간단한 스크롤 애니메이션을 구현할 수 있습니다.
2.1 기본 CSS 애니메이션
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate {
opacity: 0;
animation: fadeIn 1s ease-in-out forwards;
}
위 코드는 요소가 아래에서 위로 올라오며 나타나는 효과를 제공합니다.
2.2 CSS scroll-behavior
CSS에서 스크롤을 부드럽게 만들기 위해 scroll-behavior 속성을 사용할 수 있습니다.
html {
scroll-behavior: smooth;
}
3. 인터섹션 옵저버로 애니메이션 제어
순수 CSS로 구현된 애니메이션은 화면에 항상 표시되거나 조건에 따라 동작하지 않습니다. 이를 보완하기 위해 인터섹션 옵저버(Intersection Observer) API를 사용합니다.
3.1 인터섹션 옵저버의 작동 원리
인터섹션 옵저버는 요소가 뷰포트(화면 영역)에 들어왔는지, 또는 나갔는지를 감지합니다. 이를 통해 요소가 뷰포트에 나타날 때만 애니메이션을 실행할 수 있습니다.
4. 순수 CSS와 인터섹션 옵저버를 활용한 스크롤 애니메이션 구현
4.1 HTML 구조
<div class="content"> <div class="box" data-animate="fadeIn">스크롤 애니메이션 1</div> <div class="box" data-animate="fadeIn">스크롤 애니메이션 2</div> <div class="box" data-animate="fadeIn">스크롤 애니메이션 3</div> </div>
4.2 CSS 스타일
.box {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}
.box.active {
opacity: 1;
transform: translateY(0);
}
4.3 JavaScript 코드
document.addEventListener("DOMContentLoaded", () => {
const boxes = document.querySelectorAll(".box");
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
entry.target.classList.add("active");
} else {
entry.target.classList.remove("active");
}
});
});
boxes.forEach((box) => observer.observe(box));
});
작동 원리
- 초기 상태: 모든 .box 요소는 opacity: 0으로 보이지 않습니다.
- 스크롤 감지: IntersectionObserver가 .box 요소가 뷰포트에 들어오면 active 클래스를 추가합니다.
- 애니메이션 실행: active 클래스가 추가되면 CSS transition으로 애니메이션이 실행됩니다.
5. 고급 활용: 다양한 애니메이션 효과 추가
여러 애니메이션을 지원하기 위해 data-animate 속성을 사용하면 다양한 애니메이션 효과를 적용할 수 있습니다.
5.1 데이터 속성 기반 애니메이션
HTML
<div class="box" data-animate="fadeIn">Fade In</div> <div class="box" data-animate="slideIn">Slide In</div> <div class="box" data-animate="zoomIn">Zoom In</div>
CSS
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
@keyframes zoomIn {
from {
transform: scale(0.5);
opacity: 0;
}
to {
transform: scale(1);
opacity: 1;
}
}
.box[data-animate="fadeIn"].active {
animation: fadeIn 1s ease-out forwards;
}
.box[data-animate="slideIn"].active {
animation: slideIn 1s ease-out forwards;
}
.box[data-animate="zoomIn"].active {
animation: zoomIn 1s ease-out forwards;
}
6. 성능 최적화 팁
- 불필요한 애니메이션 제한: 모든 요소에 애니메이션을 적용하면 성능 저하가 발생할 수 있습니다.
- 옵저버 해제: 애니메이션이 완료된 요소는 옵저버에서 해제해 불필요한 이벤트 처리를 줄입니다.
if (entry.isIntersecting) {
observer.unobserve(entry.target);
}
- 최소화된 CSS와 JS 사용: 코드 크기를 줄여 페이지 로딩 속도를 유지하세요.
순수 CSS와 인터섹션 옵저버를 조합하면 외부 라이브러리 없이도 강력하고 성능이 좋은 스크롤 기반 애니메이션을 구현할 수 있습니다. 이를 통해 페이지의 시각적 매력을 높이고, 사용자 경험을 더욱 풍부하게 할 수 있습니다.
