전체화면 스크롤(fullpage) 라이브러리들

Fullpage란?

위와 같이 페이지 전체를 스크롤 하는 웹사이트 디자인을 fullpage라고 부른다.

그리고 위와 같은 페이지를 좀 더 쉽게 만들게 해주는 여러 라이브러리가 있다.

 

1. fullpage.js

https://alvarotrigo.com/fullPage/pricing/

fullPage scroll snapping. Create full screen pages fast and simple

장점

React, Vue등 다양한 라이브러리를 지원(react-fullpage, vue-fullpage)

꾸준한 업데이트와 지원

 

단점

유료 (단 비영리 프로젝트에는 GPLv3라이센스로 무료로 사용할 수 있음)

 

 

2.swiper

https://swiperjs.com/

Swiper - The Most Modern Mobile Touch Slider

장점

fullpage뿐만 아니라 다양한 애니메이션의 슬라이더를 만들 수 있음

무료

 

단점

React와 Vue Components에 대한 지원이 끊길 가능성이 있음

(Swiper Element라는 Web Components로 통합될 가능성이 높음)