[ 플러그인 ] fullpage.js

fullpage.js

 

 

https://alvarotrigo.com/fullPage/ko/

fullPage scroll snapping. Create full screen pages fast and simple

 

# 옵션 

 

https://github.com/alvarotrigo/fullPage.js?tab=readme-ov-file#options

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

 

 

 

<div id="fullpage">
    <div class="section">One</div>
    <div class="section">Two</div>
    <div class="section> Three </div>
    <div class="section"> Four</div> 
</div>

 

 new fullpage('#fullpage', {
 	licenseKey: 'YOUR_KEY_HERE'
 });

 

 

new fullpage('#fullpage', {
    // 다른 옵션들...
    sectionsColor: ['#ffffff', '#0000ff']
});

 

 

 

 

 <ul id="myMenu">
 	<li data-menuanchor="firstPage" class="active"><a href="#firstPage">First section</a></li>
 	<li data-menuanchor="secondPage"><a href="#secondPage">Second section</a></li>
 	<li data-menuanchor="thirdPage"><a href="#thirdPage">Third section</a></li>
 	<li data-menuanchor="fourthPage"><a href="#fourthPage">Fourth section</a></li>
 </ul>

 

 

 

new fullpage('#fullpage', {
    // 다른 옵션들...
    anchors: ['section1', 'section2', 'section3']
});

 

 

 new fullpage('#fullpage', {
 	anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
 	menu: '#myMenu'
 });

 

 

<div id="fullpage">
    <div class="section">One</div>
    <div class="section">Two</div>
    <div class="section fp-auto-height">
      <div class="content">Three</div>
    </div>
    <div class="section fp-auto-height">
      <div class="content">Four</div>
  </div>
</div>

 

 

• anchors: 각 섹션에 고유한 앵커를 설정합니다. 이를 사용하여 URL에 앵커를 추가하고 특정 섹션으로 이동할 수 있습니다.
• autoScrolling: 자동 스크롤링을 사용할지 여부를 설정합니다. 기본값은 true이며, 페이지를 자동으로 스크롤링합니다.
• scrollingSpeed: 페이지 스크롤 속도를 지정합니다. 기본값은 700ms입니다.
• sectionsColor: 각 섹션의 배경색을 설정합니다.
• navigation: 페이지 내비게이션을 표시할지 여부를 설정합니다. true로 설정하면 기본 내비게이션이 표시됩니다.
• navigationPosition: 내비게이션 위치를 지정합니다. 'right', 'left', 'top', 'bottom' 중 선택할 수 있습니다.
• navigationTooltips: 내비게이션 항목에 대한 툴팁을 지정합니다.
• showActiveTooltip: 현재 활성화된 섹션의 툴팁을 표시할지 여부를 설정합니다.
• slidesNavigation: 각 섹션의 슬라이드 내비게이션을 표시할지 여부를 설정합니다.
• slidesNavPosition: 슬라이드 내비게이션 위치를 지정합니다. 'bottom', 'top' 중 선택할 수 있습니다.
• controlArrows: 이전 및 다음 섹션으로 이동할 화살표를 표시할지 여부를 설정합니다.
• verticalCentered: 섹션을 수직 중앙 정렬할지 여부를 설정합니다.
• responsiveWidth / responsiveHeight: 페이지가 특정 크기에서 반응형으로 동작하도록 설정합니다.
• scrollBar: 브라우저 기본 스크롤바 대신 Fullpage.js의 스크롤바를 사용할지 여부를 설정합니다.
• scrollOverflow: 섹션 내에서 스크롤을 가능하게 할지 여부를 설정합니다.
• css3: CSS3를 사용하여 페이지 전환을 할지 여부를 설정합니다.
• scrollingSpeed: 섹션 전환에 걸리는 시간을 설정합니다.
• afterLoad: 섹션이 로드된 후 실행할 함수를 지정합니다.
• afterRender: Fullpage.js가 초기화된 후 실행할 함수를 지정합니다.
• onLeave: 섹션을 떠날 때 실행할 함수를 지정합니다.
• onSlideLeave: 슬라이드를 떠날 때 실행할 함수를 지정합니다.