fullPage.js

preview compatibility

English | Español | Pусский | 中文 | 한국어

Vue, React와 Angular 에서 사용 가능.

fullPage.js version License PayPal jsDelivr Hits    |   7Kb gziped   |   Created by @imac2

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

소개

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

호환성

fullPage.js는 모든 최신 브라우저에서 기능을 100% 발휘하며 Internet Explorer 9, Opera 12 등 이전 브라우저에서도 마찬가지로 작동됩니다. CSS3 지원이 되는 브라우저와 지원되지 않는 브라우저 모두에서 잘 작동되기 때문에 이전 브라우저와의 호환성에 적합합니다. 스마트폰, 태블릿, 터치화면 컴퓨터의 터치 지원도 됩니다.

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

라이선스

상업 라이선스

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

오픈소스 라이선스

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

자바스크립트와 CSS 파일에 있는 개발자를 밝히는 말은 (결합이나 최소화 이후에도) 그대로 두셔야 합니다

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

사용법

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

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

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>

<!-- 아래 선은 `scrollOverflow:true` 옵션을 쓰시는 경우에만 넣으셔야 합니다. -->
<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>

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

Using Webpack, Browserify or Require.js? Check how to use fullPage.js with module loaders.

CDN 사용 가능

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

필요한 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
});

//methods
fullpage_api.setAllowScrolling(false);

jQuery를 사용한 초기화

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

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

	//methods
	$.fn.fullpage.setAllowScrolling(false);
});

fullPage.js v2.X에서 보실 수 있는 것과 마찬가지로 기능과 방법을 여전히 jQuery 방식으로 불러오실 수 있습니다.

모든 옵션이 들어간 바닐라 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: 1000,
		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: false,
		scrollOverflowReset: false,
		scrollOverflowOptions: null,
		touchSensitivity: 15,
		bigSectionsDestination: null,

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

		//디자인
		controlArrows: true,
		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'},
		cards: false,
		cardsOptions: {perspective: 100, fadeContent: true, fadeBackground: true},

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

		lazyLoading: true,

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

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

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

앵커가 들어간 링크 예시는 다음과 같습니다. http://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는 웹사이트가 느려지거나 데이터 전송을 필요 이상으로 낭비하지 않게 그림, 비디오, 소리 요소를 지연 로딩할 수 있는 방법을 지원합니다. 지연 로딩을 쓰면 모바일 지원(viewport) 모드에 들어갈 때에만 이 모든 요소를 불러옵니다. 지연 로딩을 활성화하시려면 아래와 같이 src 속성을 data-src로 바꾸기만 하시면 됩니다.

<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="http://metakoncept.hr/horse.ogg" type="audio/ogg">
</audio>

떠날 때 일시정지

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

<audio data-keepplaying>
	<source src="http://metakoncept.hr/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>

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

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

옵션

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

중요 anchors 옵션 배열에 있는 값이 교정(마크업) 내 위치에 의해 .section 클래스를 지닌 요소와 직접 상관관계에 있음을 이해하시면 도움이 됩니다.

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

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

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

특정 구역이나 슬라이드에서 fullpage.js의 스크롤 막대기를 생성하고 싶지 않으시다면 fp-noscroll 클래스를 쓰세요. 예시: <div class="section fp-noscroll">

구역 요소에서 fp-auto-height-responsive를 쓰시면 반응형 모드에서는 scrolloverflow가 적용되지 않습니다.

방법

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

getActiveSection

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

fullpage_api.getActiveSection();

getActiveSlide

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

fullpage_api.getActiveSlide();

moveSectionUp()

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

fullpage_api.moveSectionUp();

moveSectionDown()

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

fullpage_api.moveSectionDown();

moveTo(구역, 슬라이드)

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

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


//웹사이트의 세번째 구역으로 스크롤하기
fullpage_api.moveTo(3, 0);

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

silentMoveTo(구역, 슬라이드)

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

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

moveSlideRight()

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

fullpage_api.moveSlideRight();

moveSlideLeft()

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

fullpage_api.moveSlideLeft();

setAutoScrolling(불리언)

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

fullpage_api.setAutoScrolling(false);

setFitToSection(불리언)

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

fullpage_api.setFitToSection(false);

fitToSection()

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

fullpage_api.fitToSection();

setLockAnchors(불리언)

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

fullpage_api.setLockAnchors(false);

setAllowScrolling(불리언, [방향])

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


//스크롤 비활성화
fullpage_api.setAllowScrolling(false);

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

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

setKeyboardScrolling(불리언, [방향])

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

//모든 키보드 스크롤 비활성화
fullpage_api.setKeyboardScrolling(false);

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

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

setRecordHistory(불리언)

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

fullpage_api.setRecordHistory(false);

setScrollingSpeed(1000분의 1초)

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

fullpage_api.setScrollingSpeed(700);

destroy(종류)

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

//fullPage.js가 만드는 모든 자바스크립트 사건(스크롤, URL의 해쉬 변경 등 이벤트)을 제거...)
fullpage_api.destroy();

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

reBuild()

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

fullpage_api.reBuild();

setResponsive(불리언)

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

fullpage_api.setResponsive(true);

responsiveSlides.toSections()

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

fullpage_api.responsiveSlides.toSections();

responsiveSlides.toSlides()

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

fullpage_api.responsiveSlides.toSlides();

콜백

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

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

afterLoad (origin, destination, direction)

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

예시:

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

	afterLoad: function(origin){
		var loadedSection = this;

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

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

onLeave (origin, destination, direction)

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

매개 변수:

예시:

new fullpage('#fullpage', {
	onLeave: function(origin, destination, direction){
		var leavingSection = 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!");
		}
	}
});

스크롤을 실행하기 전 취소

onLeave 콜백에서 false로 되돌려서 스크롤을 취소하실 수 있습니다.

new fullpage('#fullpage', {
	onLeave: function(origin, destination, direction){
		//목적지가 세번째 구역인 경우 스크롤되지 않음
		if(destination.index == 2){
			return false;
		}
	}
});

afterRender()

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

예시:

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

afterResize(width, height)

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

매개 변수:

예시:

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

afterReBuild()

This callback is fired after manually re-building fullpage.js by calling fullpage_api.reBuild().

예시:

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

afterResponsive(isResponsive)

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

매개 변수:

예시:

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

afterSlideLoad (section, origin, destination, direction)

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

예시:

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

	afterSlideLoad: function( section, origin, destination, direction){
		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)

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

매개 변수:

예시:

new fullpage('#fullpage', {
	onSlideLeave: function( section, origin, destination, direction){
		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 취소와 동일합니다.

문제 알리기

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

fullpage.js에 기여하기

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

수정 일지

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

구축 도전

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

재료가 되는 도구

누가 fullPage.js를 쓰나요?

귀하의 페이지가 여기에 나오길 원하시다면 저에게 URL을 보내주세요.

Google Coca-cola eBay BBC Sony

Vodafone British Airways McDonalds EA Vogue Mi

Mercedes sym Bugatti eDarling Ubisoft

여기서 나머지 사용자 목록을 보실 수 있습니다.

기부

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

Patreon page

기부

Sponsors

Become a sponsor and get your logo on our README on Github with a link to your site. [Become a sponsor] | [Become a patreon]

Stackpath Browserstack CodePen CodeFirst

People