728x90
마우스를 스크롤 했을 때 전체 화면 단위로 스크린이 넘어가는 풀스크린 스타일의 슬라이드 레이아웃을 구현하려면 제이쿼리를 사용해야 했는데요. 이제는 scroll-snap-type 을 이용해서 간단하게 제작이 가능합니다.
안그래도 사용하던 풀스크린 슬라이드들이 유료화 되면서 난감했는데, 천만다행 느낌 ㅠ_ㅠ)
<style>
#wrap {
width: 100%;
height: 100vh;
overflow: auto;
scroll-snap-type: mandatory;}
#wrap .page {
scroll-snap-align: center;
display: inline-block;
width: 100%;
height: 100vh;
padding: 100px;
font-size: 70px;
text-align: center;
box-sizing: border-box;
color: #fff;}
</style>
<body>
<div id="wrap">
<div class="page" style="background:black;">01</div>
<div class="page" style="background:blueviolet;">02</div>
<div class="page" style="background:brown;">03</div>
<div class="page" style="background:darkgreen;">04</div>
<div class="page" style="background:darkblue;">05</div>
</div>
</body>각 페이지를 묶는 wrap 에다가 scroll snap type를 선언해주고 각 페이지에 scroll snap align을 선언해 줍니다.
위 소스를 하단에 첨부하니 궁금하신 분들은 다운받아서 브라우저에서 돌려보세요~
반응형
'공부 > html, css' 카테고리의 다른 글
| 반응형에서 꼭 필요한 미디어쿼리 (0) | 2023.01.07 |
|---|---|
| 홈페이지 링크 시 뜨는 미리보기 섬네일 설정하기 (0) | 2023.01.07 |
| 스크롤 디자인 꾸미기 (0) | 2023.01.07 |
| 링크 이미지 테두리 없애기 (0) | 2023.01.07 |
| 이미지맵 좌표 찍기 (usemap) (1) | 2023.01.07 |
