728x90
오늘 소개해드릴 기능은 PC에서는 마우스휠로 모바일에서는 터치드레그로 슬라이드 모션 혹은 스냅효과를 줄 수있는 CSS기능입니다
자..잠깐! JS가 아닌 CSS로 그게 가능하다고??!!
이미 오래전부터 모바일 웹사이트로의 유입이 많아지면서 많은양의 컨텐츠를 화면내에서 카드섹션형식이나 리스트형식으로 보여주기위해 흔하게 사용되고 있는 UI인데요
일일히 스크립트로 제어하기엔 신경쓸게 많고 사이트가 무거워지는게 사실입니다
하지만 이제는 물흐르듯이 style을 잡아줄때 아래 css한줄만 함께 넣어주기만 하면됩니다
scroll-snap-type: x mandatory;
scroll-snap-type: y mandatory;
너무 직관적으로 x는 가로스크롤, y는 세로스크롤을 지원합니다
심하게 간단하면서도 거의 모든 기기와 브라우저를 지원하고 있으니 사용하지 않을 이유가 없다고 생각합니다
많은분들이 쉽게 사용해서 쾌적한 웹사이트가 많아지길 바래봅니다ㅎ
데모 확인링크
https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-snap-type
scroll-snap-type - CSS: Cascading Style Sheets | MDN
The scroll-snap-type CSS property sets how strictly snap points are enforced on the scroll container in case there is one.
developer.mozilla.org
끝
728x90
반응형
'코딩저장소' 카테고리의 다른 글
| 마우스포인터 방향으로 따라가는 화면만들기 (0) | 2022.05.06 |
|---|---|
| jQeury ui를 이용해 drag & drop(드래그앤드랍) 기능을 쉽고 빠르게 이용하자 (0) | 2022.04.28 |
| GreenSock 플러그인 ScrollTrigger 사용법 (0) | 2022.02.22 |
| fullpageScrollHorizontally 기능 무료로 사용하기 (fullpage와 swiper조합) (29) | 2022.02.21 |
| 스크롤 다운 모션 라이브러리 AOS.js 사용법 (0) | 2022.01.06 |
댓글