스크롤 애니메이션 인터랙션
사용자가 페이지를 스크롤할 때 요소들이 부드럽게 등장하거나 위치·투명도 변화하는 효과.
실무에서는 주로 마케팅 랜딩 페이지나 제품 소개 페이지에 사용.
순수 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 같은 라이브러리를 쓰면 훨씬 편리.
실무에서는 주로 마케팅 랜딩 페이지나 제품 소개 페이지에 사용.
순수 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 같은 라이브러리를 쓰면 훨씬 편리.
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기