조사
일단 이런 스크롤스냅이 가능한 쥬뗌 치킨 웹사이트를 만들고 싶었습니다. 막 뭔가 엄청난 에니메이션이 필요할 줄 알았는데, 방법은 여러가지가 있지만 제일 간단해 보이는 방법으로 일단 적용해봤습니다.
Dit is BoBo
De BoBo is een handige sidekick voor elke ruimte in huis. Aaibaar en eigenwijs.
ditisbobo.nl
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
적용
global.css에 scroll-snap-type 추가
scroll-snap-type: y mendatory // y축으로 무조건 스크룰을 강제하게끔 하는 속성입니다.
보여줄 컴포넌트에서 scroll-center랑 snap-always
snap-center // 스크롤을 하고 났을때 보여주는 컴포넌트 뷰 측면에서 정렬
snap-always // 애초에 부모 컨테이너 쪽에서 mandatory가 켜져있어야하는데 또한 무조건 스냅을 해야한다는 것
결과
'Project > Jetaime' 카테고리의 다른 글
| 자동 재생 무한 슬라이더 만들기 (0) | 2023.07.08 |
|---|---|
| NextJS 프로젝트 세팅 w/ Husky, eslint, prettier (0) | 2023.05.21 |