FullPage 전체화면 스크롤 사이트

링크 : https://alvarotrigo.com/fullPage/

(참고 : 요즘은 FullPage 형식보다 자유로운 스크롤 + 애니메이션이 대세입니다. )

그리고 스크린 사이즈에 따라 CSS 반응형으로 짜는게 가장 어렵습니다. (투입 시간대비 가성비가 안좋음)

FullPage.js - https://github.com/alvarotrigo/fullpage.js

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

 

설치법

fullpage.js 자바스크립트 파일과 fullpage.css 파일이 필요합니다. 홈페이지 들어가셔서 구해오시면 되겠습니다. 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.css">

<script src="https://cdnjs.cloudflare.com/ajax/libs/fullPage.js/3.0.7/fullpage.js"></script>

 

사용법

▼ HTML을 만들어줍니다. 부모에게 id를 잘부여해주도록 합시다. 

<div id="fullpage">

<div class="section">One</div>

<div class="section">

            <div class="slide" data-anchor="slide1">Two 1</div>

            <div class="slide" data-anchor="slide2">Two 2</div>

</div> <div class="section">Three</div>

<div class="section">Four</div> </div>

 

▼ 자바스크립트를 하단에 입력해주시면 되겠습니다.

<script>

new fullpage('#fullpage', { //하단은 옵션

              autoScrolling:true,

              scrollHorizontally: true,

              sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'], });

</script>

new fullpage() 이 함수만 쓰면 되는데

함수 안의 첫째 파라미터엔 여러분이 fullpage로 만들 div의 아이디를 적어주시면 되고 

두번째 파라미터는 옵션을 집어넣어주시면 됩니다. 

옵션 사용법은 홈페이지에 자세히 나와있습니다. 

참고로 두번째 div박스를 보시면... slide라는 클래스를 가진 div를 만드시면 자동으로 이미지 슬라이더 UI화 됩니다.