공부흔적

JS/jQuery | 플러그인 fullpage 사용방법 및 응용 본문

Javascript

JS/jQuery | 플러그인 fullpage 사용방법 및 응용

죵이한장 2023. 5. 19. 02:15

라이센스가 필요없는 v.2.9.7버전으로 fullpage 기능사용

 

1) 아래 사이트에서 source code 파일 다운로드

 

Release fullpage.js 2.9.7 · alvarotrigo/fullPage.js

Fixed bug: Drag and Move ignores fitToSection when dragging the scroll bar on Windows #2874 Fixed bug: Win 7 mouse scroll issues in IE with Drag And Move on scroll bar #3143 Fixed bug: getPaddings ...

github.com

 

 

2) 작업 셋팅

- fullpage 적용할 .html 생성

- (1)에서 다운받은 fullPage.js-2.9.7에서 jquery.fullPage.css와 jquery.fullPage.js를 .html에 연결

- jquery.fullPage.js 작동을 위해 jquery cdn도 연결

- 추가적인 스크립트 작업을 위한 .js 생성

(fullPage.js-2.9.7 > examples 폴더 내 사용예시 참조할 수 있음)

 

3) 메뉴얼

 

GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple - GitHub - alvarotrigo/fullPage.js: fullPage plugin by Alvaro Trigo. Create full screen pages fast and simple

github.com

(.html)

(.js)

(메뉴얼을 참고해 navigation과 같은 다양한 기능확인가능)

 

+ 응용

 

fullpageScrollHorizontally 기능 무료로 사용하기 (fullpage와 swiper조합)

오늘 소개할 내용은! 풀페이지로 스토리텔링한 페이지를 제작할때 유용하게 사용중인 fullpage.js 라이브러리입니다. 하지만 2.9.7버전 이후로 3버전 이상부터는 유료버전으로 전환되어 버렸다 ㅠ

zzzmh.tistory.com

 

'Javascript' 카테고리의 다른 글

JS/jQuery | 티스토리API를 활용해 포스팅 정보 가져오기  (0) 2023.06.07
JS/jQuery | 코딩애플 강의 정리  (0) 2023.05.29
JS/jQuery | 텍스트 추가하기 (플러그인 커스텀)  (0) 2023.05.17
JS/jQuery | 슬라이드 만들어 사용하기 (작성중)  (0) 2023.04.28
JS/jQuery | 스크롤시 헤더 고정하기  (0) 2023.04.28
'Javascript' Related Articles more