안녕하세요 오늘은 CSS의 스크롤 스냅(Scroll Snap) 기능을 사용해보겠습니다.
이 기능을 사용하면 스크롤바가 이동한 만큼만 하위 요소들이 이동하는 것이 아니라, 스크롤을 하면 자동으로 다음 요소로 애니메이션 효과와 함께 이동하면서 달라붙는 효과를 표현할 수 있습니다.
구현한 예제 시연 화면은 다음과 같습니다.
다음은 예제 전체 코드입니다.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Scroll Snap</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
scroll-snap-type: y mandatory;
height: 100vh;
overflow-y: scroll;
}
section {
scroll-snap-align: start;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: x-large;
}
.spring {
background-image: url(images/spring.jpg);
background-size: cover;
}
.summer {
background-image: url(images/summer.jpg);
background-size: cover;
}
.autumn {
background-image: url(images/autumn.jpg);
background-size: cover;
}
.winter {
background-image: url(images/winter.jpg);
background-size: cover;
}
</style>
</head>
<body>
<div class="container">
<section class="spring">
<h1>Spring</h1>
</section>
<section class="summer">
<h1>Summer</h1>
</section>
<section class="autumn">
<h1>Autumn</h1>
</section>
<section class="winter">
<h1>Winter</h1>
</section>
</div>
</body>
</html>
'container' 클래스에 'scroll-snap-type' 속성을 추가했습니다. 속성 값은 'y mandatory' 를 사용했습니다.
세로 방향으로 스크롤할 것이므로 'y' 값을 주었고, 페이지 단위로 자동으로 스크롤되게 하기 위해서 'mandatory' 값을 사용했습니다.
'mandatory' 속성을 사용하면 스크롤이 일어날 때 다음 요소가 자동으로 표시 영역을 채울 때까지 스크롤되어 달라붙게 됩니다.
'mandatory' 대신에 'proximity' 속성을 사용할 수 있는데, 그렇게 되면 스크롤이 일어나서 다음 슬라이드 요소가 표시 영역을 '거의' 채우면 자동으로 달라붙으면서 표시 영역을 채우게 됩니다. 그 사이 영역에서는 스크롤을 할 때 스크롤한 위치에서 멈추게 됩니다.
그리고 하위 슬라이더 아이템 역할을 하는 section 요소에는 'scroll-snap-align' 속성을 추가했습니다. start, center, end 속성값을 사용할 수 있고 이번 예제에서는 'start' 값을 사용했습니다.
참고사이트 : https://css-tricks.com/practical-css-scroll-snapping/
'HTML／CSS' 카테고리의 다른 글
| [JavaScript] 현재시각 표시하기 (0) | 2022.10.18 |
|---|---|
| [HTML/CSS] 로그인 페이지 만들어보기 (0) | 2022.10.10 |
| [HTML/CSS] 간단한 그림판 만들어보기 (0) | 2022.09.25 |
| [HTML/CSS] 랜딩 페이지 만들어보기 (0) | 2022.09.25 |
| [ HTML / CSS ] 파비콘(favicon) 적용해보기 (0) | 2022.09.20 |
