배달의 민족 랜딩 페이지, fullpage.js 그리고 대안

 

배달의 민족 랜딩 페이지와 같이 화면은 꽉 차고 스크롤 바는 없으며

조금만 스크롤을 내려도 다음 섹션으로 넘어가는 걸 만들고 싶었다.

대한민국 1등 배달앱, 배달의민족

클론 코딩을 해보자 마음먹고 속성값을 overflow: hidden과 translationY를 이용해서 하면 되겠다고 막연하게 생각했다.

​

그런데 쉽지 않았고 구글링을 해본 결과 fullpage.js를 알게 되었다.

제이쿼리 풀페이지 플러그인으로

데모 파일에서 배달의 민족 랜딩 페이지와 흡사하단 걸 알 수 있다.

fullPage scroll snapping. Create full screen pages fast and simple

아래는 깃헙 주소이다. (한국어 readme도 있다.)

alvarotrigo/fullPage.js

alvarotrigo/fullPage.js

 

 

 

 

나는 상업용 랜딩 페이지를 제작 중이기에 라이선스 항목이 가장 중요하다.

Commercial license

If you want to use fullPage to develop non open sourced sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Which means, you won't have to change your whole application source code to an open source license. [Purchase a Fullpage Commercial License]

Open source license

If you are creating an open source application under a license compatible with the GNU GPL license v3, you may use fullPage under the terms of the GPLv3.

The credit comments in the JavaScript and CSS files should be kept intact (even after combination or minification)

https://github.com/alvarotrigo/fullPage.js#commercial-license

fullPage를 써서 상업용 웹사이트, 주제, 프로젝트, 앱을 개발하고자 하신다면 상업 라이선스가 적절합니다.

그러나 GNU GPL 라이선스 v3과 호환되는 라이선스 하에서 오픈소스 앱을 만드신다면, GPLv3 조건에서 fullPage를 사용하실 수 있습니다. 자바스크립트와 CSS 파일에 있는 개발자를 밝히는 말은 (결합이나 최소화 이후에도) 그대로 두셔야 합니다 라고 명시되어 있다.

​

그렇다면 상업용 웹사이트인데 credit comments는 그대로 두면 사용이 가능하단 말인지 의문이다..

fullPage 비용이 최소 9파운드인데 구매해서 사용할까 고민도 했지만 혹시 다른 대안이 있을까 열심히 또 구글링을 했다..

---

찾은 건 라이선스가 mit인 Pageable이다.

밑 주소에 들어가 보면 데모 페이지들과 소스파일들을 확인할 수 있다.

 

Mobius1/Pageable

검색해보니 mit 라이선스는 상업적 이용도 가능하다!!!

+ docs 폴더안에 license.txt 파일이 있으니 더 읽어보면 좋을듯 하다.

​

그리고

No jQuery다.

순수 자바스크립트로 만들었다니 세상에는 대단한 사람이 많은 것 같다.

 

 

이제 다시 열심히 개발을 시작해야겠다.

 

 

 

 

 

 

+2021/03/10

페이지 전환 플러그인 관련 글을 올렸는데 이 게시글에 추가한다는 걸 잊고 있었다.

 

 

 

2021.02.13 - [개발일기] - Swiper(스와이퍼) - 자바스크립트 슬라이더 스크롤 플러그인 / 비슷한 플러그인들

Swiper(스와이퍼) - 자바스크립트 슬라이더 스크롤 플러그인 / 비슷한 플러그인들