■ Snap Scrolling
<style>
body, html {
height: 100%;
overflow: hidden;
}
.container {
height: 100%;
width: 100%;
overflow-y: auto;
scroll-snap-type: y mandatory;
}
.section {
height: 100vh;
width: 100%;
scroll-snap-align: start;
}
.section:nth-child(2n) {
background-color: rgb(184, 212, 185);
}
.section:nth-child(2n+1) {
background-color: #f08bdf;
}
</style>
<body>
<div class="container">
<div class="section">Section 1</div>
<div class="section">Section 2</div>
<div class="section">Section 3</div>
<div class="section">Section 4</div>
</div>
</body>
○ Scroll-snap
▷ scroll-snap-type: 축 스냅 종류;
- 축 : x y both 로 적용
- 종류
mandatory : 스크롤 완료시 스냅 포인트에 반드시 스냅
proximity : 스크롤이 스냅 포인트에 가까운 경우에만 스냅 되도록
▷ scroll-snap-align: 스냅포인트를 자식요소에 지정
start : 시작부분을 포인트로 설정
center : 중앙부분을 설정
end : 끝 부분을 설절
none : 설정하지 않음
'HTML + CSS > JQuery' 카테고리의 다른 글
| JQuery - 화면 이동에 따른 회전, 곡선, 이동 (0) | 2024.07.15 |
|---|---|
| JQuery - 아래 컨텐츠가 올라오면서 화면 전환 (Parallax) (0) | 2024.07.11 |
| JQuery - 버튼 클릭시 스크롤 이동 (0) | 2024.07.10 |
| JQuery - 이미지 슬라이드 효과 (0) | 2024.07.10 |
| JQuery - 이미지 페이드 인 아웃 (0) | 2024.07.10 |