fullpage.js 사용법

보완할 포트폴리오를 구상하면서 한 화면안에서 움직이는 포폴을 생각했었다.

그러다 찾게된 fullpage.js

오픈소스를 공개해준 분께 참 감사하다 ㅠㅠ

 

사이트 : https://alvarotrigo.com/fullPage/ko/

깃헙 주소 : https://github.com/alvarotrigo/fullpage.js

 

사용법까지 친절하게 나와있다.

이클립스를 켜고 예제 파일을 실행해보자.

 

먼저 사이트에 접속하면 zip 파일을 다운로드 받을 수 있다.

압축을 풀면 examples라는 폴더가 있다.

 

 

해당 폴더 안에서 원하는 디자인을 하나 선택하여 코드를 복사+붙여넣기 한다.

(프로젝트를 만들고 jsp, was를 설정하는 부분은 생략)

 

이제 프로젝트에 js 파일과 이미지 파일을 복사+붙여넣기 한다.

☞ examples.css, examples.js파일과 dist폴더 안에 있는 파일을 전부 붙여넣는다.

 

 

 

 

나는 WebRoot(WebContent)안에 js폴더와 images폴더를 따로 만들어 해당 파일들을 붙여넣었다.

 

 

이제 확인해야할 부분은 기존 코드에서 설정된 경로들이다.

js와 css파일을 읽어오는 경로들을 확인하고 현재 js, css파일이 있는 경로로 바꿔주자.

 

<script type="text/javascript" src="/js/examples.js"></script>
<link rel="stylesheet" type="text/css" href="/js/examples.css">  

 

아래 로컬에서 실행된 결과화면이다.