사용자가 페이지를 스크롤할 때 요소들이 부드럽게 등장하거나 위치·투명도 변화하는 효과.
실무에서는 주로 마케팅 랜딩 페이지나 제품 소개 페이지에 사용.
순수 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 같은 라이브러리를 쓰면 훨씬 편리.
게시글 목록
| 번호 | 제목 |
|---|---|
| 1547 | |
| 1546 | |
| 1545 |
CSS
이미지 비율 유지 반응형 처리
|
| 1544 |
CSS
CSS 변수와 다크 모드 테마
|
| 1542 | |
| 1541 | |
| 1540 | |
| 1539 | |
| 1538 | |
| 1537 |
CSS
박스 모델 완전 이해
|
| 1535 | |
| 1534 | |
| 1533 | |
| 1532 | |
| 1531 | |
| 1512 | |
| 1508 |
CSS
CSS 스위치형 버튼
4
|
| 1479 |
CSS
간단하게 메뉴꾸미기2
13
|
| 1478 |
CSS
간단하게 메뉴꾸미기 1
16
|
| 1475 | |
| 1474 | |
| 1460 |
부트스트랩
비활성화 및 활성 항목
2
|
| 1459 |
부트스트랩
드롭 다운 헤더
7
|
| 1458 |
부트스트랩
드롭 다운 분배기
2
|
| 1457 |
부트스트랩
부트 스트랩 드롭 다운
|
| 1456 |
부트스트랩
패널 바닥 글, 패널 그룹
|
| 1455 |
부트스트랩
부트스트랩 패널 제목
|
| 1454 |
부트스트랩
부트스트랩 panel
|
| 1453 | |
| 1452 |
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기