fullPage.js4.0.29

preview compatibility

English | Español | Français | Pусский | 中文 | 한국어 | 日本語 | Português Brasileiro

Vue, ReactAngular 에서 사용 가능.


fullPage.js version License PayPal jsDelivr Hits Minzipped Size   |   Created by @imac2


(단일 페이지 웹사이트 또는 한페이지 사이트로도 알려진) 전체 화면 스크롤 웹사이트를 만드는 간단하고 쓰기 쉬운 라이브러리입니다. 전체 화면 스크롤 웹사이트를 만들 수 있으며 웹사이트 구역 안에 수평 방향 슬라이더를 추가할 수 있습니다.

소개소개

소개

기능 요청뿐만 아니라 코딩 스타일 개선까지 언제든 의견 제안을 매우 환영합니다. 이 라이브러리를 멋지게 만들어서 사람들의 삶을 더 편리하게 가꾸어 보아요!

호환성호환성

호환성

fullPage.js는 모든 최신 브라우저와 IE 11에서 완벽하게 동작합니다. IE 11이하 버전을 지원해야 한다면 fullPage.js v3 사용을 고려하세요. 또한 모바일 폰, 태블릿, 터치 스크린 컴퓨터에서의 터치 지원도 제공합니다.

fullpage.js를 지원해 주시는 Browserstack에게 특별히 감사드립니다.

라이선스라이선스

라이선스

상업 라이선스상업 라이선스

상업 라이선스

fullPage를 써서 상업용 웹사이트, 주제, 프로젝트, 앱을 개발하고자 하신다면 상업 라이선스가 적절합니다. 상업 라이선스로 귀하의 소스 코드에 저작권을 부여하실 수 있습니다. 다시 말해 귀하의 앱의 전 소스 코드를 오픈 소스 라이선스로 바꾸시지 않아도 된다는 것입니다. [여기서 Fullpage 상업 라이선스를 구매하세요]

오픈소스 라이선스오픈소스 라이선스

오픈소스 라이선스

GNU GPL 라이선스 v3과 호환되는 라이선스 하에서 오픈소스 앱을 만드신다면, GPLv3 조건에서 fullPage를 사용하실 수 있습니다.

fullPage.js가 사용되고 있음을 명확히 알려야 합니다. 자바스크립트와 CSS 파일에 있는 개발자를 밝히는 말은 (결합이나 최소화 이후에도) 그대로 두셔야 합니다

fullPage의 라이선스에 대해 더 자세히 읽어보기.

사용법사용법

사용법

예시 파일에서 보실 수 있듯이 다음을 넣으셔야 합니다.

  • fullpage.js 자바스크립트 파일 (또는 더 작아진 버전인 fullpage.min.js)
  • fullpage.csscss 파일

    선택 사항으로css3:false를 쓰실 때 라이브러리에 들어있는 효과(easeInOutCubic) 이외에 다른 easing 효과를 쓰고 싶으시다면 easing 파일를 추가하실 수 있습니다.

bower 또는 npm을 써서 설치하기bower 또는 npm을 써서 설치하기

bower 또는 npm을 써서 설치하기

선택 사항으로, 만약 아래가 더 마음에 드신다면 fullPage.js를 bower나 npm과 함께 설치하실 수 있습니다.

터미널:

복사// bower 사용시
bower install fullpage.js

// npm 사용시
npm install fullpage.js

들어가는 파일:들어가는 파일:

들어가는 파일:
복사<link rel="stylesheet" type="text/css" href="fullpage.css" />

<!-- 아래는 선택사항입니다. css3:false 옵션을 쓰시면서 "linear", "swing" 또는 "easeInOutCubic" 대신 다른 전환(easing) 효과를 원하시는 경우에만 필요합니다. -->
<script src="vendors/easings.min.js"></script>

<script type="text/javascript" src="fullpage.js"></script>

Webpack, Browserify 또는 Require.js를 사용하고 계신가요? 모듈 로더와 함께 fullPage.js를 사용하는 방법을 확인하세요..

CDN 사용 가능CDN 사용 가능

CDN 사용 가능

필요한 파일을 불러오실 때 CDN이 더 편하시다면 fullPage.js를 CDNJS 양식(https://cdnjs.com/libraries/fullPage.js)으로도 사용하실 수 있습니다.

필요한 HTML 구조필요한 HTML 구조

필요한 HTML 구조

HTML 코드의 첫번째 줄에 필수 HTML DOCTYPE 표기를 넣어주세요. 넣지 않으시면 구역의 높이가 깨질 수 있습니다. 제시된 사례에서는 HTML 5 doctype <!DOCTYPE html>을 씁니다.

각 구역은 section 클래스가 들어간 요소로 정의됩니다. 첫 번째 구역은 기본 설정으로 활성화되어 홈페이지가 됩니다.

구역이 포장 안에 들어가야 합니다(이 경우에는 <div id="fullpage">). 포장은 body 요소가 될 수 없습니다.

복사<div id="fullpage">
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
    <div class="section">Some section</div>
</div>

첫번째 구역이나 구역의 첫번째 슬라이드 이외에 다른 곳을 출발점으로 정의하고 싶으시다면 처음 불러오시려는 구역과 슬라이드에 active 클래스를 추가하시기만 하면 됩니다.

복사<div class="section active">Some section</div>

구역 내에 수평 방향 슬라이더를 만들기 위해 기본 설정으로 각 슬라이드가 slide 클래스가 들어 있는 요소로 정의됩니다.

복사<div class="section">
    <div class="slide"> Slide 1 </div>
    <div class="slide"> Slide 2 </div>
    <div class="slide"> Slide 3 </div>
    <div class="slide"> Slide 4 </div>
</div>

simple.html 파일에서 완전히 구현되는 HTML 구조 예시를 보실 수 있습니다.

초기 설정초기 설정

초기 설정

바닐라 자바스크립트를 사용한 초기화바닐라 자바스크립트를 사용한 초기화

바닐라 자바스크립트를 사용한 초기화

</body> 태그를 닫기 전 fullpage.js를 불러오기만 하시면 됩니다.

복사new fullpage('#fullpage', {
    //options here
    autoScrolling:true,
    scrollHorizontally: true
});

jQuery를 사용한 초기화jQuery를 사용한 초기화

jQuery를 사용한 초기화

원하실 경우 fullpage.js를 jQuery 플러그인으로 쓰실 수 있습니다!

복사$(document).ready(function() {
    $('#fullpage').fullpage({
        //options here
        autoScrolling:true,
        scrollHorizontally: true
    });

    // Example of how to use fullpage.js methods
    $.fn.fullpage.setAllowScrolling(false);
});

모든 옵션이 들어간 바닐라 JS 예시모든 옵션이 들어간 바닐라 JS 예시

모든 옵션이 들어간 바닐라 JS 예시

모든 옵션이 들어간 더 복잡한 초기 설정은 아래와 같이 코딩될 수 있습니다.

복사new fullpage('#fullpage', {
    // 이동
    menu: '#menu',
    lockAnchors: false,
    anchors:['firstPage', 'secondPage'],
    navigation: false,
    navigationPosition: 'right',
    navigationTooltips: ['firstSlide', 'secondSlide'],
    showActiveTooltip: false,
    slidesNavigation: false,
    slidesNavPosition: 'bottom',

    // 스크롤
    css3: true,
    scrollingSpeed: 700,
    autoScrolling: true,
    fitToSection: true,
    fitToSectionDelay: 600,
    scrollBar: false,
    easing: 'easeInOutCubic',
    easingcss3: 'ease',
    loopBottom: false,
    loopTop: false,
    loopHorizontal: true,
    continuousVertical: false,
    continuousHorizontal: false,
    scrollHorizontally: false,
    interlockedSlides: false,
    dragAndMove: false,
    offsetSections: false,
    resetSliders: false,
    fadingEffect: false,
    normalScrollElements: '#element1, .element2',
    scrollOverflow: true,
    scrollOverflowMacStyle: false,
    scrollOverflowReset: false,
    touchSensitivity: 15,
    bigSectionsDestination: null,

    // 접근성
    keyboardScrolling: true,
    animateAnchor: true,
    recordHistory: true,

    // 디자인
    controlArrows: true,
    controlArrowsHTML: [
        '<div class="fp-arrow"></div>', 
        '<div class="fp-arrow"></div>'
    ],
    verticalCentered: true,
    sectionsColor : ['#ccc', '#fff'],
    paddingTop: '3em',
    paddingBottom: '10px',
    fixedElements: '#header, .footer',
    responsiveWidth: 0,
    responsiveHeight: 0,
    responsiveSlides: false,
    parallax: false,
    parallaxOptions: {type: 'reveal', percentage: 62, property: 'translate'},
    dropEffect: false,
    dropEffectOptions: { speed: 2300, color: '#F82F4D', zIndex: 9999},
    waterEffect: false,
    waterEffectOptions: { animateContent: true, animateOnMouseMove: true},
    cards: false,
    cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

    // 맞춤 선택자
    sectionSelector: '.section',
    slideSelector: '.slide',

    lazyLoading: true,
    lazyLoadThreshold: 0,
    observer: true,
    credits: { enabled: true, label: 'Made with fullPage.js', position: 'right'},

    // 사건(이벤트)
    beforeLeave: function(origin, destination, direction, trigger){},
    onLeave: function(origin, destination, direction, trigger){},
    afterLoad: function(origin, destination, direction, trigger){},
    afterRender: function(){},
    afterResize: function(width, height){},
    afterReBuild: function(){},
    afterResponsive: function(isResponsive){},
    afterSlideLoad: function(section, origin, destination, direction, trigger){},
    onSlideLeave: function(section, origin, destination, direction, trigger){},
    onScrollOverflow: function(section, slide, position, direction){}
});

구역 또는 슬라이드로 가는 링크 만들기구역 또는 슬라이드로 가는 링크 만들기

구역 또는 슬라이드로 가는 링크 만들기

fullPage.js를 (anchors 옵션이나 각 구역마다data-anchor 속성을 쓰셔서) 구역의 앵커 링크와 쓰신다면 앵커 링크를 통해 구역 내부 특정 슬라이드로 바로 가실 수 있습니다.

앵커가 들어간 링크 예시는 다음과 같습니다. https://alvarotrigo.com/fullPage/#secondPage/2 (해당 구역/슬라이드에 수동으로 가신다면 보시게 될 URL입니다) URL의 끝부분이 #secondPage/2로 끝나는 것에 주목해 주세요.

초기 설정이 다음과 같이 설정될 경우

복사new fullpage('#fullpage', {
    anchors:['firstPage', 'secondPage', 'thirdPage']
});

#secondPage/2 URL 끝에 있는 앵커가 목적지 구역과 슬라이드를 각각 정의합니다. 이전 URL에서는 secondPage 앵커로 정의된 구역이 목적지이고, 목적지 슬라이드는 색인으로 2를 쓰고 있기 때문에 두번째 슬라이드가 됩니다. (구역의 첫번째 슬라이드는 엄밀히 말해 구역이기 때문에 색인이 0입니다.)

HTML 교정(마크업)에서 data-anchor 속성을 쓴다면 슬라이드에 색인 대신 맞춤화된 앵커를 쓸 수도 있습니다.

복사<div class="section">
    <div class="slide" data-anchor="slide1"> Slide 1 </div>
    <div class="slide" data-anchor="slide2"> Slide 2 </div>
    <div class="slide" data-anchor="slide3"> Slide 3 </div>
    <div class="slide" data-anchor="slide4"> Slide 4 </div>
</div>

이 마지막 사례에서는 이전에 다뤘던 #secondPage/2와 동일한 역할을 하는 #secondPage/slide3 URL을 쓰게 됩니다.

만약 anchors 배열이 없다면 data-anchor 속성을 써서 동일하게 구역 앵커를 정의할 수 있음을 기억해 주세요.

주의하세요! data-anchor 태그는 웹사이트에서 모든 ID 요소(또는 IE의 NAME 요소)와 동일한 값을 지닐 수 없습니다.

구역을 더 작게 또는 크게 만들기구역을 더 작게 또는 크게 만들기

구역을 더 작게 또는 크게 만들기

데모 fullPage.js는 구역과 슬라이드에서 총 높이 제한을 없애는 방법을 만들어 줍니다. 구역의 높이를 모바일 지원(viewport)보다 더 작거나 크게 만들 수 있습니다. 꼬리말에 적합합니다. 중요한 건 모든 구역에 이 기능을 쓰실 필요가 없다는 겁니다. 웹사이트를 처음 불러왔을 때 구역 수가 하나를 넘어가면 이미 모바일 지원(viewport)에 있게 되기 때문에 fullPage.js 스크롤이 다음으로 전혀 넘어가지 않습니다.

구역을 작게 만들고 싶으시다면 적용하시고 싶은 구역에 fp-auto-height 클래스를 쓰시기만 하면 됩니다. 그러면 구역/슬라이드 컨텐츠에 맞게 높이가 설정됩니다.

복사<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>

반응형 자동 높이 구역반응형 자동 높이 구역

반응형 자동 높이 구역

데모 반응형 자동 높이는 fp-auto-height-responsive 클래스로 만드실 수 있습니다. 이렇게 하시면 반응형 모드가 실행되기 전까지는 구역이 전체 화면이 됩니다. 반응형 모드가 실행되면 컨텐츠가 요구하는 크기를 띄게 되는데, 모바일 지원(viewport)보다 더 크거나 작을 수 있습니다.

fullpage.js가 추가하는 상태 클래스fullpage.js가 추가하는 상태 클래스

fullpage.js가 추가하는 상태 클래스

Fullpage.js는 웹사이트의 상태를 기록하기 위해 여러가지 요소로 다양한 클래스를 추가합니다.

  • 현재 보여지는 구역과 슬라이드에 active가 추가됩니다.
  • (만약 menu 옵션을 쓰신다면) 현 메뉴 요소에 active가 추가됩니다.
  • 웹사이트의 body 요소에 fp-viewing-SECTION-SLIDE 양식의 클래스가 추가됩니다. (예: fp-viewing-secondPage-0) SECTIONSLIDE 부분이 현 구역과 슬라이드의 앵커가 (앵커가 없는 경우 색인이) 됩니다.
  • 반응형 모드로 들어갈 때 fp-responsivebody 요소에 추가됩니다.
  • fullpage.js가 활성화될 때 html 요소에 fp-enabled가 추가됩니다. (그리고 없어지면 제거됩니다.)
  • fullpage.js가 없어질 때 fullpage.js 컨테이너에 fp-destroyed가 추가됩니다.

지연 로딩지연 로딩

지연 로딩

데모 fullPage.js는 웹사이트가 느려지거나 데이터 전송을 필요 이상으로 낭비하지 않게 그림, 비디오, 소리 요소를 지연 로딩할 수 있는 방법을 지원합니다. 지연 로딩을 쓰면 모바일 지원(viewport) 모드에 들어갈 때에만 이 모든 요소를 불러옵니다. 지연 로딩을 활성화하시려면 아래와 같이 src 속성을 data-src로 바꾸기만 하시면 됩니다.

복사<code><img data-src="image.png">
<video>
    <source data-src="video.webm" type="video/webm" />
    <source data-src="video.mp4" type="video/mp4" />
</video>

data-src를 쓰는 다른 지연 로딩 솔루션을 이미 쓰고 계신다면 lazyLoading: false 옵션을 설정하셔서 fullPage.js 지연 로딩을 비활성화하실 수 있습니다.

미디어 자동 재생/일시정지 삽입미디어 자동 재생/일시정지 삽입

미디어 자동 재생/일시정지 삽입

데모 주의: 자동 재생 기능은 (iOS의 사파리 10.0 미만 버전 등) OS와 브라우저에 따라 일부 모바일 기기에서는 작동하지 않을 수 있습니다.

구역/슬라이드를 불러올 때 재생:구역/슬라이드를 불러올 때 재생:

구역/슬라이드를 불러올 때 재생:

비디오나 소리에 autoplay 속성을 쓰시거나 유튜브 iframe에 autoplay=1 매개변수를 쓰시면 페이지를 불러올 때 미디어 요소가 재생됩니다. 구역/슬라이드를 불러올 때 재생되도록 하려면 대신 data-autoplay 속성을 쓰시면 됩니다. 아래는 예시입니다.

복사<audio data-autoplay>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

떠날 때 일시정지떠날 때 일시정지

떠날 때 일시정지

삽입된 HTML5 <video> / <audio>와 유튜브 iframe은 구역이나 슬라이드를 떠나실 때 자동으로 일시정지됩니다. 이는 data-keepplaying 속성을 쓰시면 비활성화됩니다. 다음은 예시입니다.

복사<audio data-keepplaying>
    <source src="https://www.w3schools.com/html/horse.ogg" type="audio/ogg">
</audio>

확장 프로그램 사용확장 프로그램 사용

확장 프로그램 사용

fullpage.js는 기본 기능을 강화하기 위해 쓸 수 있는 여러가지 확장 프로그램을 지원합니다. 모든 확장 프로그램이 fullpage.js 옵션으로 열거되어 있습니다.

확장 프로그램을 쓰시려면 보통 쓰시는 fullPage.js 파일(fullpage.js 또는 fullpage.min.js) 말고 dist 폴더 안에 있는 작아진 파일fullpage.extensions.min.js을 쓰셔야 합니다.

확장 파일을 획득하시면 fullPage 앞에 추가하셔야 합니다. 예를 들어 연속 수평(Continuous Horizontal) 확장을 쓰신다면 확장 파일을 먼저 넣고 그 다음에 fullPage 연장 버전을 넣습니다.

복사<script type="text/javascript" src="fullpage.continuousHorizontal.min.js"></script>
<script type="text/javascript" src="fullpage/fullpage.extensions.min.js"></script>

각 확장 프로그램마다 활성화 키와 라이선스 키가 필요합니다. 더 상세한 사항은 여기를 참조하세요.

그 다음 옵션에 설명된 대로 사용하시고 설정하실 수 있습니다.

옵션옵션

옵션

licenseKeylicenseKey

licenseKey

(기본값 null). 이 옵션은 필수입니다. fullPage를 비오픈소스 프로젝트에서 쓰신다면 fullPage 상업 라이선스 구매시 받으신 라이선스 키를 쓰셔야 합니다. If your project is open source you can request a license key. 라이선스에 관한 더 상세한 정보는 여기웹사이트에서 읽어보실 수 있습니다. 예시:

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

controlArrowscontrolArrows

controlArrowsDemo

(기본값 true) 제어 화살표를 눌러서 슬라이드가 오른쪽 또는 왼쪽으로 움직이도록 허용할지 여부를 결정합니다.

controlArrowsHTMLcontrolArrowsHTML

controlArrowsHTMLDemo

(기본값은 ['<div class="fp-arrow"></div>', '<div class="fp-arrow"></div>']입니다. 이는 수평 슬라이드가 있는 구역의 컨트롤 화살표에 적용할 HTML 구조와 클래스를 정의할 수 있는 방법을 제공합니다. 배열은 두 화살표의 구조를 포함하고 있으며, 첫 번째 항목은 왼쪽 화살표이고, 두 번째는 오른쪽 화살표입니다.)

verticalCenteredverticalCentered

verticalCentered

(기본값 true) 구역 내 컨텐츠가 수직으로 중심에 위치하도록 합니다. (flexbox 사용) 본문을 div로 감싸는 것이 잠재적인 문제를 피하는 데 도움이 될 수 있습니다. (Uses flex-direction: column; display: flex; justify-content: center;)

scrollingSpeedscrollingSpeed

scrollingSpeedDemo

(기본값 700) 스크롤 이동 속도를 0.001초 단위로 설정합니다.

sectionsColorsectionsColor

sectionsColorDemo

(기본값 none) 각 구역별 CSS background-color 속성을 정의합니다. 아래는 예시입니다.

복사new fullpage('#fullpage', {
    sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});

anchorsanchors

anchorsDemo

(기본값 []) 각 구역별 URL에 보여질 앵커 링크(#예시)를 정의합니다. 앵커값이 고유해야 합니다. 배열 내 앵커의 위치가 어느 구역에 앵커가 적용될지를 정의합니다. (두번째 위치는 두번째 구역에 적용 등). 앵커를 쓰시면 브라우저를 통한 앞뒤 이동도 가능해집니다. 이 옵션을 통해 사용자가 특정 구역이나 슬라이드에 책갈피 표시도 할 수 있습니다. 주의하세요! 앵커는 웹사이트에서 모든 ID 요소(또는 IE용 NAME 요소)와 동일한 값을 지닐 수 없습니다. 여기에 설명된 대로 이제는 data-anchor 속성을 써서 HTML 구조에서 직접 앵커를 정의할 수 있습니다.

lockAnchorslockAnchors

lockAnchors

(기본값 false) URL에 있는 앵커가 라이브러리에서 효과를 지닐지 말지를 결정합니다. 나만의 기능과 콜백을 위해 여전히 내부에서 앵커를 쓸 수는 있지만 웹사이트 스크롤에는 아무런 효과가 없습니다. URL에 있는 앵커를 써서 fullPage.js를 다른 플러그인과 결합할 때 유용합니다.

easingeasing

easingDemo

(기본값 easeInOutCubic) 수직 및 수평 스크롤시 전이 효과를 정의합니다. 전이 효과 중 일부를 사용하기 위해서는 vendors/easings.min.js 또는 jQuery UI 파일이 필요합니다. 대신 다른 라이브러리를 쓸 수도 있습니다.

easingcss3easingcss3

easingcss3Demo

(기본값 ease) css3:true를 쓰는 경우 사용할 전이 효과를 정의합니다. (linear, ease-out 등) 미리 정의된 효과를 쓰시거나 cubic-bezier 기능을 쓰셔서 나만의 효과를 만드실 수 있습니다. Matthew Lein CSS Easing Animation Tool도 쓰실 수 있습니다.

loopToploopTop

loopTopDemo

(기본값 false) 첫번째 구역에서 스크롤을 위로 올릴 때 마지막 구역으로 이동할지 여부를 정의합니다.

loopBottomloopBottom

loopBottomDemo

(기본값 false) 마지막 구역에서 스크롤을 아래로 내릴 때 첫번째 구역으로 이동할지 여부를 정의합니다.

loopHorizontalloopHorizontal

loopHorizontalDemo

(기본값 true) 수평 슬라이더가 마지막이나 이전 슬라이드에 다다른 후 다시 반복할지 여부를 정의합니다.

css3css3

css3

(기본값 true). 구역과 슬라이드 안에서 스크롤하기 위해 JavaScript를 쓸지 CSS3을 쓸지를 정의합니다. CSS3 지원 브라우저를 쓰는 태블릿과 스마트폰에서 움직이는 속도를 높이는 데 유용합니다. 이 옵션을 true로 설정하고 브라우저가 CSS3을 지원하지 않는다면 폴백(fallback)이 대신 쓰이게 됩니다.

autoScrollingautoScrolling

autoScrollingDemo

(기본값 true) "automatic" 스크롤을 쓸지 "normal" 스크롤을 쓸지를 정의합니다. 태블릿과 스마트폰 브라우저/기기 창에서 구역이 들어맞는 방법에도 영향을 미칩니다.

fitToSectionfitToSection

fitToSectionDemo

(기본값 true) 구역을 모바일 지원(viewport)에 맞출지 말지를 결정합니다. true로 설정하면 현재 활성화된 구역이 항상 모바일 지원(viewport) 전체를 가득 채웁니다. 그렇지 않은 경우에는 사용자는 구역 중간에서 자유롭게 멈출 수 있습니다.

fitToSectionDelayfitToSectionDelay

fitToSectionDelayDemo

(기본값 1000). fitToSection이 true로 설정되면 설정된 1000분의 1초 단위로 맞춤을 지연합니다.

scrollBarscrollBar

scrollBarDemo

(기본값 false) 웹사이트에 스크롤 막대기를 쓸지 말지를 결정합니다. 스크롤 막대기를 쓰는 경우 autoScrolling 기능이 여전히 예상대로 작동할 것입니다. 또한 사용자는 스크롤 막대기로 웹사이트에서 이동할 수도 있으며 스크롤이 끝나면 fullPage.js가 화면 구역에 맞춰집니다.

paddingToppaddingTop

paddingTop

(기본값 0) 구역별 상위에 채우는 부분을 수치와 측정값(paddingTop: '10px', paddingTop: '10em'...)으로 정의합니다. 고정된 머리말을 쓰실 때 유용합니다.

paddingBottompaddingBottom

paddingBottom

(기본값 0) 구역별 하위에 채우는 부분을 수치와 측정값(paddingBottom: '10px', paddingBottom: '10em'...)으로 정의합니다. 고정된 꼬리말을 쓰실 때 유용합니다.

fixedElementsfixedElements

fixedElements

(기본값 null) 플러그인의 스크롤 구조에서 어느 요소를 빼낼지를 정의합니다. css3 옵션을 쓰실 때 고정하려면 반드시 빼내셔야 합니다. 이 요소에는 Javascript 선택자가 들어간 문자열이 필요합니다. (예시: fixedElements: '#element1, .element2')

normalScrollElementsnormalScrollElements

normalScrollElements

(기본값 null) 데모 일부 요소 위를 스크롤할때 자동 스크롤을 피하고 싶으시다면 이 옵션을 쓰셔야 합니다. (지도, div 스크롤 등에 유용.) 이 요소에는 Javascript 선택자가 들어간 문자열이 필요합니다. (예시: normalScrollElements: '#element1, .element2')

bigSectionsDestinationbigSectionsDestination

bigSectionsDestination

(기본값 null) 데모 모바일 지원(viewport)보다 더 큰 구역으로 어떻게 스크롤하는지 정의합니다. 기본 설정시 fullPage.js는 목적지 위에 있는 구역에서 내려오는 경우 상위로 스크롤하고 목적지 아래에 있는 구역에서 올라오는 경우 하위로 스크롤합니다. top, bottom, null 값이 가능합니다.

keyboardScrollingkeyboardScrolling

keyboardScrollingDemo

(기본값 true) 키보드를 써서 컨텐츠 사이를 이동할 수 있는지 정의합니다.

touchSensitivitytouchSensitivity

touchSensitivity

(기본값 5) 브라우저 창 너비/폭 퍼센트와 다음 구역 / 슬라이드로 이동하는 데 필요한 스와이프 거리를 정의합니다.

skipIntermediateItemsskipIntermediateItems

skipIntermediateItemsDemo

(기본값 false). 연속되지 않은 수직 섹션 또는 수평 슬라이드 간에 탐색할 때 스크롤 애니메이션을 건너뛸지 여부를 결정합니다. 가능한 값은 true, false, sections, slides이며, 이 동작을 수직, 수평, 또는 두 방향 모두에 적용할 수 있습니다.

continuousVerticalcontinuousVertical

continuousVerticalDemo

(기본값 false) 마지막 구역에서 아래로 스크롤할때 첫번째 구역으로 스크롤이 내려가야 할지를 정의하고, 첫번째 구역에서 위로 스크롤할때 마지막 구역으로 스크롤이 올라가야 할지를 정의합니다. loopTop, loopBottom 또는 웹사이트에 있는 모든 스크롤 막대기와 호환되지 않습니다. (scrollBar:true 또는 autoScrolling:false)

continuousHorizontalcontinuousHorizontal

continuousHorizontalDemo

(기본값 false) fullpage.js 확장 프로그램. 마지막 슬라이드에서 오른쪽으로 미끄러질 때 오른쪽으로 이동하여 첫번째 슬라이드로 이동할지를 정의하고, 첫번째 슬라이드에서 왼쪽으로 스크롤할때 왼쪽으로 이동하면서 마지막 슬라이드로 이동할지를 정의합니다. loopHorizontal과 호환되지 않습니다. fullpage.js 버전이 3.0.1 이상이어야 합니다.

scrollHorizontallyscrollHorizontally

scrollHorizontallyDemo

(기본값 false) fullpage.js 확장 프로그램. 슬라이더 안에서 마우스 휠 또는 트랙패드를 써서 수평으로 미끄러지듯 움직일지를 정의합니다. 이야기 전달에 적합합니다. It can only be used when using: autoScrolling:true. fullpage.js 버전이 3.0.1 이상이어야 합니다.

interlockedSlidesinterlockedSlides

interlockedSlidesDemo

(기본값 false) fullpage.js 확장 프로그램. 수평 슬라이더 하나를 움직일 때 다른 구역에 있는 슬라이더가 강제로 같은 방향으로 미끄러지도록 할지를 정의합니다. true, false 또는 서로 잠긴 구역이 있는 배열값이 가능합니다. 예를 들면 1에서 시작하는 [1,3,5]가 가능합니다. fullpage.js 버전이 3.0.1 이상이어야 합니다.

dragAndMovedragAndMove

dragAndMoveDemo

(기본값 false) fullpage.js 확장 프로그램. 마우스나 손가락을 써서 구역과 슬라이드를 끌어오고 튕기는 걸 활성화하거나 비활성화합니다. fullpage.js 버전이 3.0.1 이상이어야 합니다. 아래 값을 쓰실 수 있습니다.

  • true: 기능 활성화.
  • false: 기능 비활성화.
  • vertical: 수직으로만 기능 구현.
  • horizontal: 수평으로만 기능 구현.
  • fingersonly: 터치 기기에서만 기능 구현.
  • mouseonly: 데스크탑 기기에서만 기능 구현(마우스와 트랙패드).

offsetSectionsoffsetSections

offsetSectionsDemo

(기본값 false)fullpage.js 확장 프로그램. 전체화면이 아닌 구역을 퍼센트에 기반하여 쓸 수 있는 방법을 지원합니다. 방문객에게 다음이나 이전 구역의 일부를 보여줌으로써 웹사이트에 더 많은 컨텐츠가 있음을 보여주는 데 적합합니다. fullPage.js 버전이 3.0.1 이상이어야 합니다. 각 구역의 퍼센트를 정의하려면 data-percentage 속성을 쓰셔야 합니다. data-centered 속성에서 불리언(boolean) 값을 써서 모바일 지원(viewport)에서 구역이 중앙에 오도록 정의할 수 있습니다(명시하지 않을 경우 true가 기본값). 다음은 예시입니다.

복사<div class="section" data-percentage="80" data-centered="true">

resetSlidersresetSliders

resetSlidersDemo

(기본값 false). fullpage.js 확장 프로그램. 구역을 떠난 후 모든 슬라이더가 제자리로 돌아가도록 할지를 정의합니다. fullpage.js 버전이 3.0.1 이상이어야 합니다.

fadingEffectfadingEffect

fadingEffectDemo

(기본값 false). fullpage.js 확장 프로그램. 기본설정인 스크롤 효과 대신 사라지는 효과를 쓸지를 정의합니다. true, false, sections, slides 값이 가능합니다. 그러므로 수직이나 수평 또는 수직 수평이 동시에 적용되는 것만 가능합니다. fullpage.js 버전이 3.0.1 이상이어야 합니다.

animateAnchoranimateAnchor

animateAnchorDemo

(기본값 true) 앵커(#)가 주어질 때 웹사이트를 불러오면 애니메이션이 들어간 스크롤 형태로 목적지로 이동할지, 아니면 주어진 구역에서 바로 불러올지를 정의합니다.

recordHistoryrecordHistory

recordHistoryDemo

(기본값 true) 웹사이트 상태를 브라우저 방문 기록에 맞게 밀지를 정의합니다. true로 설정되면 웹사이트의 각 구역/슬라이드가 새로운 페이지가 되어 브라우저의 뒤로 가기/앞으로 가기 버튼을 누르면 구역/슬라이드를 스크롤하여 웹사이트의 이전 방문 페이지나 다음 페이지로 이동합니다. false로 설정되면 URL이 계속 바뀌어도 브라우저 방문 기록에 아무런 영향을 미치지 않습니다. autoScrolling:false값을 쓰면 이 옵션이 자동으로 꺼집니다.

menumenu

menuDemo

(기본값 false) 선택자를 써서 구역에 링크할 메뉴를 구체적으로 정할 수 있습니다. 이렇게 하면 active 클래스를 써서 구역을 스크롤할때 메뉴에 있는 대응하는 요소가 활성화됩니다. 이렇게 하면 메뉴를 만드는 것이 아니라 active 클래스를 대응하는 앵커 링크와 함께 주어진 메뉴에 있는 요소에 추가만 합니다. 구역에 메뉴 요소의 링크를 걸기 위해서는 구역 안에서 사용된 것과 동일한 앵커 링크와 함께 사용하기 위해 HTML 5 데이터-태크(data-menuanchor)가 필요합니다. 다음은 예시입니다.

복사<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: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    menu: '#myMenu'
});

주의: css3:true를 쓸 때 문제가 생기지 않도록 하려면 메뉴 요소를 전체 페이지 포장 밖에 두셔야 합니다. 그렇지 않으면 플러그인 자체가 메뉴 요소를 body에 덧붙여 버립니다.

navigationnavigation

navigationDemo

(기본값 false) true로 설정되면 작은 원으로 이루어진 이동 막대기가 나타납니다.

navigationPositionnavigationPosition

navigationPositionDemo

(기본값 none) leftright로 설정될 수 있습니다. (만약 쓰실 경우) 이동 막대기가 보여지는 위치를 정의합니다.

navigationTooltipsnavigationTooltips

navigationTooltipsDemo

(기본값 []) 이동 원을 쓰시는 경우 보여질 말풍선 위젯을 정의합니다. 다음은 예시입니다. navigationTooltips: ['firstSlide', 'secondSlide']. 원하신다면 구역마다 data-tooltip 속성을 쓰셔서 정의할 수 있습니다.

showActiveTooltipshowActiveTooltip

showActiveTooltipDemo

(기본값 false) 수직으로 이동할때 능동적 구역 보기를 위해 계속 따라다니는 말풍선 위젯을 보여줍니다.

slidesNavigationslidesNavigation

slidesNavigationDemo

(기본값 false) true로 설정되면 웹사이트에서 각 수평방향 슬라이더마다 작은 원으로 이루어진 이동 막대기를 보여줍니다.

slidesNavPositionslidesNavPosition

slidesNavPositionDemo

(기본값 bottom) 수평방향 이동 막대기 슬라이더 위치를 지정합니다. topbottom을 값으로 인정합니다. 상부 또는 하부에서의 거리와 색깔 등 다른 모든 스타일을 정의하려면 CSS 스타일을 수정하시면 됩니다.

scrollOverflowscrollOverflow

scrollOverflowDemo

(기본값 false) 컨텐츠가 구역/슬라이드의 높이보다 더 큰 경우 스크롤을 만들지 여부를 정의합니다. true로 설정되면 컨텐츠가 플러그인으로 포장됩니다.It requires the default value scrollBar: false. 특정 구역이나 슬라이드에서 fullpage.js의 스크롤 막대기를 생성하고 싶지 않으시다면 fp-noscroll 클래스를 쓰세요. 예시: <div class="section fp-noscroll">. 구역 요소에서 fp-auto-height-responsive를 쓰시면 반응형 모드에서는 scrolloverflow가 적용되지 않습니다.

scrollOverflowMacStylescrollOverflowMacStyle

scrollOverflowMacStyleDemo

(기본값 false). 활성화되면 이 옵션은 기본 스크롤바 대신 "맥 스타일"의 스크롤바를 사용하게 되며, 윈도우 컴퓨터에서는 다르게 보일 것입니다.

scrollOverflowResetscrollOverflowReset

scrollOverflowResetDemo

(기본값 false) fullpage.js 확장 프로그램. true로 설정되면 다른 수직 구역으로 옮겨갈 때 구역/슬라이드의 컨텐츠를 스크롤 막대기와 함께 위로 스크롤합니다. 이렇게 하면 구역/슬라이드 아래에서 스크롤하더라도 언제나 컨텐츠 처음 부분을 볼 수 있습니다. 가능한 값은 true, false, sections, slides입니다. 구역 또는 슬라이드에 fp-no-scrollOverflowReset 클래스를 추가하면 해당 패널에 대해 이 기능이 비활성화됩니다.

sectionSelectorsectionSelector

sectionSelectorDemo

(기본값 .section) 플러그인 구역에 쓰이는 Javascript 선택자를 정의합니다. fullpage.js와 동일한 선택자를 쓰는 다른 플러그인과 문제를 일으키지 않도록 가끔 변경해야 할 수도 있습니다.

slideSelectorslideSelector

slideSelectorDemo

(기본값 .slide) 플러그인 슬라이드에 쓰이는 Javascript 선택자를 정의합니다. fullpage.js와 동일한 선택자를 쓰는 다른 플러그인과 문제를 일으키지 않도록 가끔 변경해야 할 수도 있습니다.

responsiveWidthresponsiveWidth

responsiveWidthDemo

(기본값 0) 픽셀로 정의된 폭 아래에 정상 스크롤(autoScrolling:false)을 씁니다. 사용자가 자신만의 반응형 CSS에 쓰고 싶은 경우를 위해 fp-responsive 클래스가 바디 태그에 추가됩니다. 예를 들어 900에 설정되는 경우 브라우저의 너비가 900 미만이 될 때마다 플러그인이 정상 웹사이트처럼 스크롤됩니다.

responsiveHeightresponsiveHeight

responsiveHeightDemo

(기본값 0) 픽셀로 정의된 높이 아래에 정상 스크롤(autoScrolling:false)을 씁니다. 사용자가 자신만의 반응형 CSS에 쓰고 싶은 경우를 위해 fp-responsive 클래스가 바디 태그에 추가됩니다. 예를 들어 900에 설정되는 경우 브라우저의 높이가 900 미만이 될 때마다 플러그인이 정상 웹사이트처럼 스크롤됩니다.

responsiveSlidesresponsiveSlides

responsiveSlidesDemo

(기본값 false) fullpage.js 확장 프로그램. true로 설정될 경우 반응형 모드가 실행되면 슬라이드가 수직 구역으로 바뀝니다. (위에 상세히 설명된 responsiveWidth 또는 responsiveHeight 옵션을 써서 구현됩니다). fullpage.js 버전이 3.0.1 이상이어야 합니다.

parallaxparallax

parallaxDemo

(기본값 false) fullpage.js 확장 프로그램. 구역 / 슬라이드에서 패럴랙스 배경 효과를 쓸지 여부를 정의합니다. 패럴랙스 옵션을 어떻게 적용하는지 읽어보세요.

parallaxOptionsparallaxOptions

parallaxOptions

(기본값: { type: 'reveal', percentage: 62, property: 'translate'}). parallax:true 옵션을 쓰실 때 패럴랙스 배경 효과 매개변수를 설정하실 수 있습니다. 패럴랙스 옵션을 어떻게 적용하는지 읽어보세요.

dropEffectdropEffect

dropEffectDemo

(기본값 false) fullpage.js 확장 프로그램. 구역 또는 슬라이드에 드롭 효과를 사용할지 여부를 정의합니다. 드롭 효과 옵션 적용 방법에 대해 자세히 알아보세요.

dropEffectOptionsdropEffectOptions

dropEffectOptions

(기본값: { speed: 2300, color: '#F82F4D', zIndex: 9999}). dropEffect:true 옵션을 사용할 때 드롭 효과의 파라미터를 설정할 수 있습니다.드롭 효과 옵션 적용 방법에 대해 자세히 알아보세요.

waterEffectwaterEffect

waterEffectDemo

(기본값 false) fullpage.js 확장 프로그램. 구역 또는 슬라이드에 워터 효과를 사용할지 여부를 정의합니다. 워터 효과 옵션 적용 방법에 대해 자세히 알아보세요.

waterEffectOptionswaterEffectOptions

waterEffectOptions

(기본값: { animateContent: true, animateOnMouseMove: true}). waterEffect:true 옵션을 사용할 때 워터 효과의 파라미터를 설정할 수 있습니다. 워터 효과 옵션 적용 방법에 대해 자세히 알아보세요.

cardscards

cardsDemo

(기본값 false) fullpage.js 확장 프로그램. 구역 또는 슬라이드에 카드 효과를 사용할지 여부를 정의합니다. 카드 옵션 적용 방법에 대해 자세히 알아보세요.

cardsOptionscardsOptions

cardsOptions

(기본값: { perspective: 100, fadeContent: true, fadeBackground: true}). cards:true 옵션을 사용할 때 카드 효과의 파라미터를 설정할 수 있습니다. 카드 옵션 적용 방법에 대해 자세히 알아보세요.

lazyLoadinglazyLoading

lazyLoadingDemo

(기본값 true) 기본 설정으로 지연 로딩이 활성화됩니다. 지연 로딩 문서에 자세히 설명된 대로 data-src 속성을 지닌 모든 미디어 요소를 지연 로딩합니다. 이외 다른 지연 로딩 라이브러리를 쓰고 싶으시다면 이 fullpage.js 기능을 비활성화하실 수 있습니다.

lazyLoadThresholdlazyLoadThreshold

lazyLoadThresholdDemo

(기본값 0) 현재 섹션을 기준으로 인접한 수직 섹션 및 수평 슬라이드의 미디어 요소가 지연 로드되어야 하는 수를 지정합니다. 이전 및 다음 섹션이나 슬라이드를 몇 개 미리 로드할지 숫자로 지정하세요.

observerobserver

observerDemo

(기본값 true) 페이지의 HTML 구조 변경을 감지할지 여부를 정의합니다. 활성화되면 fullPage.js는 해당 변경 사항에 자동으로 반응하여 자체를 업데이트합니다. 구역 또는 슬라이드를 추가, 제거하거나 숨길 때 이상적입니다.

creditscredits

credits

(기본값 {enabled: true, label: 'Made with fullpage.js', position: 'right'}). fullPage.js 저작권 표시를 사용할지를 정의합니다. GPLv3 라이선스의 조항 0, 4, 5, 7에 따라, GPLv3 하에 fullPage.js를 사용하는 사용자는 fullPage.js 사용 중임을 명확하게 표시해야 합니다. 이 옵션을 활성화하여 저작권 표시를 포함하는 것을 권장합니다.

방법방법

방법

어떻게 작동하는지 여기서 보실 수 있습니다.

getActiveSectiongetActiveSection

getActiveSection

데모 활성화된 슬라이드 및 슬라이드 특성이 들어간 객체(type Section)를 얻습니다.

복사fullpage_api.getActiveSection();

getActiveSlidegetActiveSlide

getActiveSlide

데모 활성화된 구역 및 구역 특성이 들어간 객체(type Slide)를 얻습니다.

복사fullpage_api.getActiveSlide();

getScrollY() & getScrollXgetScrollY() & getScrollX

getScrollY() & getScrollX

데모 getScrollY fullPage Wrapper의 Y 축 위치를 가져옵니다. getScrollX 는 활성 수평 슬라이드의 X 축 위치를 가져옵니다.

복사fullpage_api.getScrollY();
fullpage_api.getScrollX();

moveSectionUp()moveSectionUp()

moveSectionUp()

데모 데모 한 구역 위로 스크롤합니다.

복사fullpage_api.moveSectionUp();

moveSectionDown()moveSectionDown()

moveSectionDown()

데모 한 구역 아래로 스크롤합니다.

복사fullpage_api.moveSectionDown();

moveTo(구역, 슬라이드)moveTo(구역, 슬라이드)

moveTo(구역, 슬라이드)

데모 페이지를 주어진 구역과 슬라이드로 스크롤합니다. 기본 설정으로 보이는 첫번째 페이지가 색인 0이 됩니다.

복사/*`firstSlide` 앵커 링크가 있는 구역과 두번째 슬라이드로 스크롤하기 */
fullpage_api.moveTo('firstSlide', 2);
복사//웹사이트의 세번째 구역으로 스크롤하기
fullpage_api.moveTo(3, 0);

//이는 다음과 동일
fullpage_api.moveTo(3);

silentMoveTo(구역, 슬라이드)silentMoveTo(구역, 슬라이드)

silentMoveTo(구역, 슬라이드)

데모 moveTo와 완전히 동일하지만, 이 경우에는 애니메이션 없이 스크롤 기능을 수행합니다. 목적지로 바로 건너뜁니다.

복사/*`firstSlide` 앵커 링크가 있는 구역과 두번째 슬라이드로 스크롤하기 */
fullpage_api.silentMoveTo('firstSlide', 2);

moveSlideRight()moveSlideRight()

moveSlideRight()

데모 현 구역의 수평 슬라이더를 다음 슬라이드로 스크롤합니다.

복사fullpage_api.moveSlideRight();

moveSlideLeft()moveSlideLeft()

moveSlideLeft()

데모 현 구역의 수평 슬라이더를 이전 슬라이드로 스크롤합니다.

복사fullpage_api.moveSlideLeft();

setAutoScrolling(불리언)setAutoScrolling(불리언)

setAutoScrolling(불리언)

데모 스크롤 환경설정을 실시간으로 설정합니다. 페이지의 스크롤 행위 방식을 정의합니다. true로 설정되면 "자동" 스크롤을 쓰고, 이외의 경우에는 웹사이트의 "수동"이나 "정상" 스크롤을 씁니다.

복사fullpage_api.setAutoScrolling(false);

setFitToSection(불리언)setFitToSection(불리언)

setFitToSection(불리언)

데모 fitToSection 옵션값을 설정하여 구역을 화면 안에 맞출지 여부를 정합니다.

복사fullpage_api.setFitToSection(false);

fitToSection()fitToSection()

fitToSection()

데모 가장 가까운 활성화된 구역으로 스크롤하여 구역을 모바일 지원(viewport)에 맞춥니다.

복사fullpage_api.fitToSection();

setLockAnchors(불리언)setLockAnchors(불리언)

setLockAnchors(불리언)

데모 lockAnchors 옵션값을 설정하여 앵커가 URL 안에서 효과를 낼지 여부를 설정합니다.

복사fullpage_api.setLockAnchors(false);

setAllowScrolling(불리언, [방향])setAllowScrolling(불리언, [방향])

setAllowScrolling(불리언, [방향])

데모 마우스 휠/트랙패드나 터치 제스처(기본 설정으로 활성화됨)로 구역/슬라이드를 통과하는 스크롤 가능성을 넣거나 없앱니다. setKeyboardScrolling을 쓰셔야 합니다.

  • directions: (선택 가능한 매개변수) 인정되는 값: all, up, down, left, right 또는 이들을 조합하되 down, right처럼 쉼표로 분리. 스크롤이 활성화되거나 비활성화될 방향을 정의합니다.
복사
//스크롤 비활성화
fullpage_api.setAllowScrolling(false);

//아래 방향 스크롤 비활성화
fullpage_api.setAllowScrolling(false, 'down');

//아래 및 오른쪽 방향 스크롤 비활성화
fullpage_api.setAllowScrolling(false, 'down, right');

setKeyboardScrolling(불리언, [방향])setKeyboardScrolling(불리언, [방향])

setKeyboardScrolling(불리언, [방향])

데모 키보드(기본 설정으로 활성화됨)로 구역을 통과하는 스크롤 가능성을 넣거나 없앱니다.

  • directions: (선택 가능한 매개변수) 인정되는 값: all, up, down, left, right 또는 이들을 조합하되 down, right처럼 쉼표로 분리. 스크롤이 활성화되거나 비활성화될 방향을 정의합니다.
복사//모든 키보드 스크롤 비활성화
fullpage_api.setKeyboardScrolling(false);

//키보드 아래 방향 스크롤 비활성화
fullpage_api.setKeyboardScrolling(false, 'down');

//키보드 아래 및 오른쪽 방향 스크롤 비활성화
fullpage_api.setKeyboardScrolling(false, 'down, right');

setRecordHistory(불리언)setRecordHistory(불리언)

setRecordHistory(불리언)

데모 URL의 각 해쉬 변경 기록을 기록할지 여부를 정의합니다.

복사fullpage_api.setRecordHistory(false);

setScrollingSpeed(1000분의 1초)setScrollingSpeed(1000분의 1초)

setScrollingSpeed(1000분의 1초)

데모 스크롤 속도를 1000분의 1초 단위로 정의합니다.

복사fullpage_api.setScrollingSpeed(700);

destroy(종류)destroy(종류)

destroy(종류)

데모 플러그인 사건(이벤트)을 없애며, 원하신다면 HTML 교정(마크업) 및 스타일도 제거할 수 있습니다. HTML 교정(마크업) 및 스타일 제거가 선택 가능합니다. AJAX로 컨텐츠를 불러오실 때 적합합니다.

  • type: (선택 가능한 매개변수) 비울 수 있거나 all이 가능합니다. all을 쓰면 fullpage.js가 쓰는 HTML 교정(마크업) 및 스타일이 제거됩니다. 이렇게 하면 모든 플러그인 수정 전 쓰였던 원래 HTML 교정(마크업) 및 스타일이 유지됩니다.
복사//fullPage.js가 만드는 모든 자바스크립트 사건(스크롤, URL의 해쉬 변경 등 이벤트)을 제거...)
fullpage_api.destroy();

//귀하의 HTML 교정(마크업) 원본에 추가된 모든 자바스크립트 사건(이벤트)과 모든 fullPage.js 수정을 제거.
fullpage_api.destroy('all');

reBuild()reBuild()

reBuild()

DOM 구조가 새로운 창 크기나 컨텐츠에 맞도록 업데이트됩니다. 특히 scrollOverflow:true를 쓰실 때 AJAX 콜이나 웹사이트의 DOM 구조 안에서 외부 변화와 함께 쓰시면 적합합니다.

복사fullpage_api.reBuild();

setResponsive(불리언)setResponsive(불리언)

setResponsive(불리언)

데모 페이지의 반응형 모드를 설정합니다. true로 설정되면 autoScrolling이 꺼지고 responsiveWidthresponsiveHeight 옵션이 실행될 때와 완전히 동일한 결과가 나옵니다.

복사fullpage_api.setResponsive(true);

responsiveSlides.toSections()responsiveSlides.toSections()

responsiveSlides.toSections()

fullpage.js 확장 프로그램. fullpage.js 버전이 3.0.1 이상이어야 합니다. 수평 슬라이드를 수직 구역으로 바꿉니다.

복사fullpage_api.responsiveSlides.toSections();

responsiveSlides.toSlides()responsiveSlides.toSlides()

responsiveSlides.toSlides()

fullpage.js 확장 프로그램. fullpage.js 버전이 3.0.1 이상이어야 합니다. (수직 구역으로 전환된) 슬라이드를 다시 수평 슬라이드로 되돌립니다.

복사fullpage_api.responsiveSlides.toSlides();

콜백콜백

콜백

데모 여기서 어떻게 작동되는지 보실 수 있습니다.

onLeave 등 일부 콜백에는 Section 또는 Slide 종류의 매개 변수가 들어갑니다. 이들 객체에는 다음 특성이 들어갑니다.

  • anchor: (String) 아이템의 앵커링크.
  • index: (Number) 아이템의 색인.
  • item: (DOM element) 아이템 요소.
  • isFirst: (Boolean) 아이템이 첫 번째 자식인지를 결정합니다.
  • isLast: (Boolean) 아이템이 마지막 자식인지를 결정합니다.

afterLoad (origin, destination, direction, trigger)afterLoad (origin, destination, direction, trigger)

afterLoad (origin, destination, direction, trigger)

구역을 불러오고 나서 스크롤이 끝나면 콜백이 실행됩니다. 매개 변수:

  • origin: (Object) 활성화된 구역
  • destination: (Object) 목적지 구역.
  • direction: (String) 스크롤하는 방향에 따라 up 또는 down

예시:

복사new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: function(origin, destination, direction, trigger){
        var origin = this;

        //색인 사용
        if(origin.index == 2){
            alert("Section 3 ended loading");
        }

        //앵커링크 사용
        if(origin.anchor == 'secondSlide'){
            alert("Section 2 ended loading");
        }
    }
});

onLeave (origin, destination, direction, trigger)onLeave (origin, destination, direction, trigger)

onLeave (origin, destination, direction, trigger)

사용자가 구역을 떠나고 새로운 구역으로 이동하는 와중에 콜백이 실행됩니다. false로 되돌리면 발동하기 전에 취소됩니다.

매개 변수:

  • origin: (Object) 출발 구역.
  • destination: (Object) 목적지 구역.
  • direction: (String) 스크롤하는 방향에 따라 up 또는 down

예시:

복사new fullpage('#fullpage', {
    onLeave: function(origin, destination, direction, trigger){
        var origin = this;

        //구역 2를 떠난 후
        if(origin.index == 1 && direction =='down'){
            alert("Going to section 3!");
        }

        else if(origin.index == 1 && direction == 'up'){
            alert("Going to section 1!");
        }
    }
});

beforeLeave (origin, destination, direction, trigger)beforeLeave (origin, destination, direction, trigger)

beforeLeave (origin, destination, direction, trigger)

데모 This callback is fired right before leaving the section, just before the transition takes place.

You can use this callback to prevent and cancel the scroll before it takes place by returning false.

Parameters:

  • origin: (Object) section of origin.
  • destination: (Object) destination section.
  • direction: (String) it will take the values up or down depending on the scrolling direction.
  • trigger: (String) indicates what triggered the scroll. It can be: "wheel", "keydown", "menu", "slideArrow", "verticalNav", "horizontalNav".

Example:

복사
var cont = 0;
new fullpage('#fullpage', {
    beforeLeave: function(origin, destination, direction, trigger){

        // prevents scroll until we scroll 4 times
        cont++;
        return cont === 4;
    }
});

afterRender()afterRender()

afterRender()

데모 페이지 구조가 생성된 직후에 이 콜백이 실행됩니다. (이 플러그인이 DOM을 수정해서 결과 구조를 만들기 때문에) 다른 플러그인을 초기 설정하거나 문서(document)가 있어야 준비되는 모든 코드를 실행하고자 할 때 이 콜백을 쓰시면 됩니다. 더 자세한 정보를 원하신다면 자주 묻는 질문(FAQ)을 참조해 주세요.

예시:

복사new fullpage('#fullpage', {
    afterRender: function(){
        var pluginContainer = this;
        alert("The resulting DOM structure is ready");
    }
});

afterResize(width, height)afterResize(width, height)

afterResize(width, height)

데모 브라우저 창의 크기가 바뀐 뒤에 이 콜백이 실행됩니다. 구역 크기가 바뀐 직후에 실행됩니다.

매개 변수:

  • width: (Number) 창의 너비.
  • height: (Number) 창의 폭.

예시:

복사new fullpage('#fullpage', {
    afterResize: function(width, height){
        var pluginContainer = this;
        alert("The sections have finished resizing");
    }
});

afterReBuild()afterReBuild()

afterReBuild()

데모 이 콜백은 fullpage_api.reBuild()를 호출하여 fullpage.js를 수동으로 다시 빌드한 후에 실행됩니다.

예시:

복사new fullpage('#fullpage', {
    afterReBuild: function(){
        console.log("fullPage.js has manually being re-builded");
    }
});

afterResponsive(isResponsive)afterResponsive(isResponsive)

afterResponsive(isResponsive)

데모 fullpage.js가 정상 모드에서 반응형 모드로 바뀌거나 반응형 모드에서 정상 모드로 바뀌고 나면 이 콜백이 실행됩니다.

매개 변수:

  • isResponsive: 반응형 모드(true)로 들어가거나 정상 모드(false)로 되돌아갈지를 결정하는 불리언

예시:

복사new fullpage('#fullpage', {
    afterResponsive: function(isResponsive){
        alert("Is responsive: " + isResponsive);
    }
});

afterSlideLoad (section, origin, destination, direction, trigger)afterSlideLoad (section, origin, destination, direction, trigger)

afterSlideLoad (section, origin, destination, direction, trigger)

데모 구역의 슬라이드를 불러오고 나서 스크롤이 끝나면 콜백이 실행됩니다. 매개 변수:

  • section: (Object) 활성화된 수직 구역.
  • origin: (Object) 출발 수평 슬라이드.
  • destination: (Object) 도착 수평 슬라이드.
  • direction: (String) 스크롤 방향에 따라 right 또는 left.

예시:

복사new fullpage('#fullpage', {
    anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterSlideLoad: function( section, origin, destination, direction, trigger){
        var loadedSlide = this;

        //두번째 구역의 첫번째 슬라이드
        if(section.anchor == 'secondPage' && destination == 1){
            alert("First slide loaded");
        }

        //두번째 구역의 두번째 슬라이드
        //(#secondSlide가 두번째 슬라이드의 앵커라고 가정할 때)
        if(section.index == 1 && destination.anchor == 'secondSlide'){
            alert("Second slide loaded");
        }
    }
});

onSlideLeave (section, origin, destination, direction, trigger)onSlideLeave (section, origin, destination, direction, trigger)

onSlideLeave (section, origin, destination, direction, trigger)

데모 사용자가 슬라이드를 떠나서 다른 슬라이드로 이동하는 와중에 콜백이 실행됩니다. false로 되돌리면 발동하기 전에 취소됩니다.

매개 변수:

  • section: (Object) 활성화된 수직 구역.
  • origin: (Object) 출발 수평 슬라이드.
  • destination: (Object) 도착 수평 슬라이드.
  • direction: (String) 스크롤 방향에 따라 right 또는 left.

예시:

복사new fullpage('#fullpage', {
    onSlideLeave: function( section, origin, destination, direction, trigger){
        var leavingSlide = this;

        //두번째 구역의 첫번째 슬라이드를 떠나서 오른쪽으로 이동
        if(section.index == 1 && origin.index == 0 && direction == 'right'){
            alert("Leaving the fist slide!!");
        }

        //두번째 구역의 세번째 슬라이드를 떠나서 왼쪽으로 이동
        if(section.index == 1 && origin.index == 2 && direction == 'left'){
            alert("Going to slide 2! ");
        }
    }
});

실행되기 전에 이동 취소실행되기 전에 이동 취소

실행되기 전에 이동 취소

onSlideLeave 콜백에서 false로 되돌려서 취소하실 수 있습니다. onLeave 취소와 동일합니다.


onScrollOverflow (section, slide, position, direction)onScrollOverflow (section, slide, position, direction)

onScrollOverflow (section, slide, position, direction)

데모 이 콜백은 fullPage.js의 scrollOverflow: true 옵션을 사용하여 스크롤 가능한 구역 내부에서 스크롤이 발생할 때 실행됩니다.

매개 변수:

  • section: (Object) 활성화된 수직 구역.
  • slide: (Object) 출발 수평 슬라이드.
  • position: (Integer) section/slide 내에서 스크롤된 범위. 0에서 시작.
  • direction: (String) up 또는 down

예시:

복사new fullpage('#fullpage', {
    onScrollOverflow: function( section, slide, position, direction){
        console.log(section);
        console.log("position: " + position);
    }
});

문제 알리기

  1. 문의하시기 이전에 먼저 github 검색으로 찾아보시기 바랍니다.
  2. fullpage.js 최신 버전을 쓰시기 바랍니다. 이전 버전은 지원해 드리지 않습니다.
  3. Github 문제 포럼을 활용해 보세요.
  4. 문제만 따로 떼어내어 재현해야 합니다. 가능하다면 jsfiddle이나 codepen을 활용하시기 바랍니다.

fullpage.js에 기여하기

fullpage.js에 기여하기를 방문해 주세요.

수정 일지

최근 수정 사항 목록을 보시려면 수정 내역을 참조해 주세요.

구축 도전

fullpage.js 배포 파일을 구축하고 싶으신가요? 구축 도전을 방문해 주세요.

재료가 되는 도구

누가 fullPage.js를 쓰나요?누가 fullPage.js를 쓰나요?

누가 fullPage.js를 쓰나요?

Who is using fullPage.js

기부기부

기부

두 팔 벌려 기부를 환영합니다 :)

Patreon page

기부

SponsorsSponsors

Sponsors

후원자가 되어 GitHub의 README에 귀사의 로고와 웹사이트 링크를 게재하세요. [Become a sponsor] | [Become a patreon]

Codeless Stackpath Browserstack CodePen

PeoplePeople

People

ContributorsContributors

Contributors

Do you have questions?

Find answers for your questions on fullPage.js, its extensions and WordPress plugins.

Go to Help Center