사용자가 페이지를 스크롤할 때 요소들이 부드럽게 등장하거나 위치·투명도 변화하는 효과.
실무에서는 주로 마케팅 랜딩 페이지나 제품 소개 페이지에 사용.
순수 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 같은 라이브러리를 쓰면 훨씬 편리.
게시글 목록
| 번호 | 제목 |
|---|---|
| 1451 |
부트스트랩
Disabled Item
|
| 1450 |
부트스트랩
활성 상태
|
| 1449 |
부트스트랩
링크 된 항목으로 그룹 나열
|
| 1448 |
부트스트랩
부트 스트랩 배지가있는 목록 그룹
|
| 1447 |
부트스트랩
부트 스트랩 목록 그룹
|
| 1446 |
부트스트랩
Bootstrap Pager 버튼 맞춤
1
|
| 1445 |
부트스트랩
Bootstrap Pager
|
| 1444 |
부트스트랩
Breadcrumbs
|
| 1443 |
부트스트랩
Pagination Sizing
|
| 1442 |
부트스트랩
부트스트랩 Disabled State
|
| 1441 |
부트스트랩
부트스트랩 활성 상태
|
| 1440 |
부트스트랩
부트 스트랩 페이지 매김
|
| 1438 |
부트스트랩
스택 된 진행률 표시 줄
|
| 1437 |
부트스트랩
애니메이션 진행률 표시 줄
|
| 1436 |
부트스트랩
스트라이프 진행 표시 줄
|
| 1435 |
부트스트랩
컬러 진행 바
|
| 1434 |
부트스트랩
레이블이있는 진행 표시 줄
|
| 1433 |
부트스트랩
부트 스트랩 진행률 표시 줄
|
| 1432 |
부트스트랩
레이블
|
| 1431 |
부트스트랩
부트 스트랩 배지 및 라벨
|
| 1430 |
부트스트랩
부트 스트랩 글리펀콜
|
| 1429 |
부트스트랩
분할 단추 드롭 다운
|
| 1428 |
부트스트랩
중첩 단추 그룹 및 드롭 다운 메뉴
|
| 1427 |
부트스트랩
양쪽 맞춤 버튼 그룹
|
| 1426 |
부트스트랩
세로 단추 그룹
|
| 1425 |
부트스트랩
버튼 그룹
|
| 1424 |
부트스트랩
활성 / 비활성 버튼
|
| 1421 |
부트스트랩
블록 레벨 버튼
|
| 1420 |
부트스트랩
단추 크기
1
|
| 1419 |
부트스트랩
부트 스트랩 버튼
1
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기