fullpage.js フルスクリーンスクロールの具体的な使い方

<link rel="スタイルシート" href="css/jquery.fullPage.css" rel="外部nofollow" >

<script src="js/jquery.min.js"></script>
 
<!-- jquery.easings.min.js は必須であり、イージング パラメータに使用されます。代わりに完全な jQuery UI を使用することもできます -->
<script src="js/jquery.easings.min.js"></script>
 
<!-- scrollOverflow が true に設定されている場合、jquery.slimscroll.min.js をインポートする必要がありますが、通常は必要ありません。 -->
<script src="js/jquery.slimscroll.min.js"></script>
 
<script src="js/jquery.fullPage.js"></script>

/*クリック可能なナビゲーションを追加*/
<ul id="メニュー">
    <li データメニューアンカー="page1" クラス="アクティブ">
        <a href="#page1" rel="external nofollow" >最初の画面</a>
    </li>
    <li データメニューアンカー="ページ2">
        <a href="#page2" rel="external nofollow" >セカンドスクリーン</a>
    </li>
    <li データメニューアンカー="page3">
        <a href="#page3" rel="external nofollow" >第 3 画面</a>
    </li>
    <li データメニューアンカー="ページ4">
        <a href="#page4" rel="external nofollow" >4 番目の画面</a>
    </li>
</ul>
/*マウススクロールで変更/*
<div id="dowebok">
    <div class="section">
        <h3>最初の画面</h3>
        <p>fullPage.js — バインディング メニューのデモ</p>
    </div>
    <div class="セクション アクティブ">
        <h3>セカンドスクリーン</h3>
        <p>左上隅をチェックして、クリックして制御してください</p>
    </div>
    <div class="section">
        <h3>第3の画面</h3>
        <p>バインドされたメニューにはデフォルトのスタイルがないので、自分で記述する必要があります</p>
    </div>
    <div class="section">
        <h3>4番目の画面</h3>
        <p>これが最後の画面です</p>
    </div>
</div>

<スクリプト>
$(関数(){
    $('#dowebok').fullpage({
    セクションカラー: ['#1bbc9b', '#4BBFC3', '#7BAABE', '#f90'],
    //色パラメータを設定するアンカー: ['page1', 'page2', 'page3', 'page4'],
    //アンカーリンクメニューを定義: '#menu'
    // メニューをバインドし、関連するプロパティをアンカーの値に対応するように設定する。メニューはスクロールを制御できる});
});
</スクリプト>

$(ドキュメント).ready(関数() {
    $('#fullpage').fullpage({
        //ナビゲーション
        メニュー: '#menu',
        lockAnchors: false、
        アンカー:['firstPage', 'secondPage'],
        ナビゲーション: false、
        ナビゲーション位置: '右'、
        ナビゲーションツールチップ: ['firstSlide', 'secondSlide'],
        アクティブツールチップを表示: false、
        スライドナビゲーション: false、
        slidesNavPosition: '下'、

        //スクロール
        css3: 真、
        スクロール速度: 700,
        自動スクロール: true、
        セクションに適合: true、
        セクションへの適合遅延: 1000,
        スクロールバー: false、
        イージング: 'easeInOutCubic',
        easingcss3: 'ease',
        ループボトム: false、
        loopTop: false、
        ループ水平: true、
        連続垂直: false、
        連続水平: false、
        水平スクロール: false、
        インターロックスライド: false、
        ドラッグアンドムーブ: false、
        オフセットセクション: false、
        リセットスライダー: false、
        フェーディング効果: false、
        通常のスクロール要素: '#要素1, .要素2',
        スクロールオーバーフロー: false、
        scrollOverflowReset: false、
        スクロールオーバーフローオプション: null、
        タッチ感度: 15,
        通常のスクロール要素タッチしきい値: 5、
        bigSectionsDestination: null、

        //アクセシビリティ
        キーボードスクロール: true、
        animateAnchor: true、
        記録履歴: true、

        //デザイン
        コントロール矢印: true,
        垂直中央: true、
        セクションカラー: ['#ccc', '#fff'],
        パディングトップ: '3em'、
        パディング下部: '10px'、
        固定要素: '#header, .footer',
        レスポンシブ幅: 0,
        レスポンシブ高さ: 0,
        レスポンシブスライド: false、
        視差: 偽、
        parallaxOptions: {タイプ: 'reveal'、パーセンテージ: 62、プロパティ: 'translate'},

        //カスタムセレクター
        セクションセレクター: '.section',
        スライドセレクター: '.slide',

        遅延読み込み: true、

        //イベント
        onLeave: 関数(インデックス、次のインデックス、方向){},
        afterLoad: 関数(アンカーリンク、インデックス){},
        afterRender: 関数(){},
        afterResize: 関数(){},
        afterResponsive: 関数(isResponsive){},
        afterSlideLoad: 関数(アンカーリンク、インデックス、スライドアンカー、スライドインデックス){},
        onSlideLeave: 関数(アンカーリンク、インデックス、スライドインデックス、方向、次のスライドインデックス){}
    });
});

controlArrows: (デフォルトは true) スライドを右または左に移動するためにコントロール矢印を使用するかどうかを決定します。

verticalCentered: (デフォルトは true) セクション内のコンテンツを垂直方向に中央揃えします。true に設定すると、コンテンツはライブラリによってラップされます。委任を使用するか、afterRender コールバックで他のスクリプトを読み込むことを検討してください。

scrollingSpeed: (デフォルト 700) スクロール遷移の速度（ミリ秒単位）。

sectionColor: (デフォルトなし) 各セクションの CSS 背景色プロパティを定義します。例:

$('#fullpage').fullpage({
    セクションカラー: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
アンカー: (デフォルト []) 各セクションの URL に表示されるアンカー リンク (#example) を定義します。アンカーの値は一意である必要があります。配列内のアンカーの位置によって、アンカーが適用されるセクションが定義されます (2 番目のセクションの場合は 2 番目の位置など)。アンカーを使用した前後のナビゲーションは、ブラウザーからも実行できます。このオプションを使用すると、ユーザーは特定のセクションまたはスライドをブックマークすることもできます。注意: アンカーは、サイト上の ID 要素 (または IE の場合は NAME 要素) と同じ値を持つことはできません。ここで説明されているように、属性 data-anchor を使用して、アンカーを HTML 構造に直接定義できるようになりました。

lockAnchors: (デフォルトは false) URL 内のアンカーがライブラリ内で何らかの効果を持つかどうかを決定します。独自の関数やコールバックの内部ではアンカーを引き続き使用できますが、サイトのスクロールには影響しません。URL 内のアンカーを使用して fullPage.js を他のプラグインと組み合わせる場合に便利です。

重要：アンカー オプション配列の値は、マークアップ内の位置によって .section クラスを持つ要素に直接相関していることを理解しておくと役立ちます。

easing: (デフォルトはeaseInOutCubic) 垂直および水平スクロールに使用するトランジション効果を定義します。一部のトランジションを使用するには、ファイル vendors/jquery.easings.min.js または jQuery UI が必要です。代わりに他のライブラリを使用することもできます。

easingcss3: (デフォルトはease) css3:trueを使用する場合に使用するトランジション効果を定義します。事前定義された効果(linear、ease-outなど)を使用することも、cubic-bezier関数を使用して独自の効果を作成することもできます。Matthew Lein CSS Easing Animation Toolを使用することをお勧めします。

loopTop: (デフォルトは false) 最初のセクションで上にスクロールしたときに最後のセクションまでスクロールするかどうかを定義します。

loopBottom: (デフォルトは false) 最後のセクションで下にスクロールしたときに、最初のセクションまでスクロールするかどうかを定義します。

loopHorizo​​ntal: (デフォルトは true) 最後のスライドまたは前のスライドに到達した後に水平スライダーがループするかどうかを定義します。

css3: (デフォルトは true)。セクションとスライド内でスクロールするために JavaScript または CSS3 変換を使用するかどうかを定義します。CSS3 をサポートするブラウザーでタブレットやモバイル デバイスの移動を高速化するのに役立ちます。このオプションが true に設定されていて、ブラウザーが CSS3 をサポートしていない場合は、代わりに jQuery フォールバックが使用されます。

autoScrolling: (デフォルトは true) 「自動」スクロールを使用するか、「通常」スクロールを使用するかを定義します。また、タブレットや携帯電話のブラウザ/デバイス ウィンドウにセクションが収まる方法にも影響します。

fitToSection: (デフォルトは true) セクションをビューポートに合わせるかどうかを決定します。 true に設定すると、現在アクティブなセクションが常にビューポート全体を占めます。 それ以外の場合は、ユーザーはセクションの途中で自由に停止できます。

fitToSectionDelay: (デフォルト 1000)。fitToSection が true に設定されている場合、設定されたミリ秒だけフィッティングが遅延されます。

scrollBar: (デフォルトは false) サイトにスクロールバーを使用するかどうかを決定します。スクロールバーを使用する場合でも、autoScrolling 機能は期待どおりに動作します。ユーザーはスクロールバーを使用してサイトを自由にスクロールすることができ、スクロールが終了すると fullPage.js によってセクションが画面に収まります。

paddingTop: (デフォルト 0) 各セクションの上部のパディングを数値とその大きさで定義します (paddingTop: '10px'、paddingTop: '10em'...) 固定ヘッダーを使用する場合に便利です。

paddingBottom: (デフォルト 0) 各セクションの下部パディングを数値とその大きさで定義します (paddingBottom: '10px'、paddingBottom: '10em'...)。固定フッターを使用する場合に便利です。

fixedElements: (デフォルトは null) プラグインのスクロール構造から削除する要素を定義します。これは、css3 オプションを使用して要素を固定する場合に必要です。これらの要素の jQuery セレクターを含む文字列が必要です。(例: fixedElements: '#element1, .element2')

normalScrollElements: (デフォルトは null) 一部の要素をスクロールするときに自動スクロールを回避したい場合は、このオプションを使用する必要があります。(マップ、スクロール div などに便利です) これらの要素の jQuery セレクターを含む文字列が必要です。(例: normalScrollElements: '#element1, .element2') このオプションは、セクション/スライド要素自体には適用しないでください。

normalScrollElementTouchThreshold: (デフォルト 5) タッチ デバイスの div でスクロール機能を有効にするために、Fullpage が normalScrollElements が一致するかどうかをテストする HTML ノード ツリーのホップ数のしきい値を定義します。(例: normalScrollElementTouchThreshold: 3)

bigSectionsDestination: (デフォルトは null) ビューポートより大きいサイズのセクションにスクロールする方法を定義します。デフォルトでは、fullPage.js は、目的のセクションより上のセクションから来た場合は上部にスクロールし、目的のセクションより下のセクションから来た場合は下部にスクロールします。可能な値は top、bottom、null です。

keyboardScrolling: (デフォルトは true) キーボードを使用してコンテンツを移動できるかどうかを定義します。

touchSensitivity: (デフォルト 5) ブラウザウィンドウの幅/高さのパーセンテージと、次のセクション/スライドに移動するために必要なスワイプ距離を定義します。

ContinuousVertical: (デフォルトは false) 最後のセクションで下にスクロールするか、最初のセクションまで下にスクロールするか、最初のセクションで上にスクロールするか、最後のセクションまで上にスクロールするかを定義します。loopTop、loopBottom、またはサイト内に存在するスクロール バーとは互換性がありません (scrollBar:true または autoScrolling:false)。

ContinuousHorizo​​ntal: (デフォルトは false) fullpage.js の拡張。最後のスライドで右にスライドしたときに最初のスライドまで右にスライドするかどうか、また最初のスライドで左にスクロールしたときに最後のスライドまで左にスライドするかどうかを定義します。loopHorizo​​ntal とは互換性がありません。fullpage.js >= 2.8.3 が必要です。

scrollHorizo​​ntally: (デフォルトは false) fullpage.js の拡張。マウス ホイールまたはトラックパッドを使用してスライダー内で水平方向にスライドするかどうかを定義します。ストーリーテリングに最適です。fullpage.js >= 2.8.3 が必要です。

interlockedSlides: (デフォルトは false) fullpage.js の拡張。1 つの水平スライダーを動かすと、他のセクションのスライダーも同じ方向にスライドするかどうかを決定します。可能な値は true、false、または連動セクションの配列です。たとえば、1 から始まる [1,3,5] です。fullpage.js >= 2.8.3 が必要です。

dragAndMove: (デフォルトは false) fullpage.js の拡張機能。マウスまたは指を使用してセクションとスライドをドラッグおよびフリックすることを有効または無効にします。fullpage.js >= 2.8.9 が必要です。可能な値は次のとおりです:

true: 機能を有効にします。
false: 機能を無効にします。
vertical: 機能を垂直方向にのみ有効にします。
水平方向: 機能を水平方向にのみ有効にします。
fingeronly: タッチデバイスのみで機能を有効にします。
mouseonly: デスクトップ デバイス (マウスとトラックパッド) のみで機能を有効にします。
offsetSections: (デフォルトは false)fullpage.js の拡張機能。パーセンテージに基づいて非フルスクリーン セクションを使用する方法を提供します。次のセクションまたは前のセクションの一部を表示することで、サイトにさらにコンテンツがあることを訪問者に示すのに最適です。fullPage.js >= 2.8.8 が必要です。各セクションのパーセンテージを定義するには、属性 data-percentage を使用する必要があります。ビューポート内のセクションの中央配置は、属性 data-centered のブール値を使用して決定できます (指定されていない場合はデフォルトで true になります)。例:

    <div class="section" データパーセンテージ="80" データセンター="true">
resetSliders: (デフォルトは false)。fullpage.js の拡張機能。各セクションを離れた後にすべてのスライダーをリセットするかどうかを定義します。fullpage.js >= 2.8.3 が必要です。

fadingEffect: (デフォルトは false)。fullpage.js の拡張機能。デフォルトのスクロール効果の代わりにフェード効果を使用するかどうかを定義します。可能な値は true、false、sections、slides です。したがって、垂直方向または水平方向のみに適用することも、両方に適用することもできます。fullpage.js >= 2.8.6 が必要です。

animateAnchor: (デフォルトは true) アンカー (#) が指定された場合のサイトの読み込みが、アニメーションで目的地までスクロールするか、指定されたセクションに直接読み込まれるかを定義します。

recordHistory: (デフォルトは true) サイトの状態をブラウザの履歴にプッシュするかどうかを定義します。true に設定すると、サイトの各セクション/スライドは新しいページとして機能し、ブラウザの戻るボタンと進むボタンはセクション/スライドをスクロールしてサイトの前または次の状態に到達します。false に設定すると、URL は変更され続けますが、ブラウザの履歴には影響しません。autoScrolling:false を使用すると、このオプションは自動的にオフになります。

menu: (デフォルトは false) セレクターを使用して、セクションにリンクするメニューを指定できます。この方法では、セクションをスクロールすると、クラス active を使用してメニュー内の対応する要素がアクティブになります。これによりメニューは生成されず、対応するアンカー リンクを持つ指定されたメニュー内の要素に active クラスが追加されるだけです。メニューの要素をセクションにリンクするには、セクション内で使用されるのと同じアンカー リンクを使用する HTML 5 データ タグ (data-menuanchor) が必要になります。例:

<ul id="マイメニュー">
    <li data-menuanchor="firstPage" class="active"><a href="#firstPage" rel="external nofollow" >最初のセクション</a></li>
    <li data-menuanchor="secondPage"><a href="#secondPage" rel="external nofollow" >2 番目のセクション</a></li>
    <li data-menuanchor="thirdPage"><a href="#thirdPage" rel="external nofollow" >第 3 セクション</a></li>
    <li data-menuanchor="fourthPage"><a href="#fourthPage" rel="external nofollow" >第 4 セクション</a></li>
</ul>
$('#fullpage').fullpage({
    アンカー: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
    メニュー: '#myMenu'
});
注意: css3:true を使用するときに問題を回避するために、メニュー要素はフルページ ラッパーの外側に配置する必要があります。そうしないと、プラグイン自体によって body に追加されます。

navigation: (デフォルトは false) true に設定すると、小さな円で構成されたナビゲーション バーが表示されます。

navigationPosition: (デフォルトなし) left または right に設定でき、ナビゲーション バーが表示される位置を定義します (使用している場合)。

navigationTooltips: (デフォルト []) ナビゲーション サークルが使用されている場合に表示するツールチップを定義します。例: navigationTooltips: ['firstSlide', 'secondSlide']。必要に応じて、各セクションで属性 data-tooltip を使用して定義することもできます。

showActiveTooltip: (デフォルト false) 垂直ナビゲーションでアクティブに表示されているセクションの永続的なツールチップを表示します。

slidesNavigation: (デフォルトは false) true に設定すると、サイト上の各ランドスケープ スライダーに小さな円で構成されたナビゲーション バーが表示されます。

slidesNavPosition: (デフォルトは下) スライダーの横向きナビゲーション バーの位置を定義します。値として上と下を指定できます。CSS スタイルを変更して、上または下からの距離や、色などの他のスタイルを決定することもできます。

scrollOverflow: (デフォルトは false) (IE 8 とは互換性がありません) コンテンツがセクション/スライドの高さより大きい場合に、スクロールを作成するかどうかを定義します。true に設定すると、コンテンツはプラグインによってラップされます。委任を使用するか、afterRender コールバックで他のスクリプトを読み込むことを検討してください。true に設定する場合、ベンダー ライブラリ scrolloverflow.min.js が必要です。このファイルは、fullPage.js プラグインの前、jQuery の後に読み込む必要があります。例:

<script type="text/javascript" src="vendors/scrolloverflow.min.js"></script>
<script type="text/javascript" src="jquery.fullPage.js"></script>
fullpage.js が特定のセクションまたはスライドにスクロールバーを作成しないようにするには、クラス fp-noscroll を使用します。例: <div class="section fp-noscroll">

また、セクション要素で fp-auto-height-responsive を使用すると、レスポンシブ モードで scrolloverflow が適用されないようにすることもできます。

scrollOverflowReset: (デフォルトは false) fullpage.js の拡張。true に設定すると、別の垂直セクションに移動するときに、スクロール バーを使用してセクション/スライドのコンテンツを上にスクロールします。これにより、セクション/スライドは、その下のセクションからスクロールする場合でも、常にそのコンテンツの先頭を表示します。

scrollOverflowOptions: scrollOverflow:true を使用すると、fullpage.js は iScroll.js ライブラリのフォークおよび修正バージョンを使用します。使用したい iScroll.js オプションを fullpage.js に提供することで、スクロール動作をカスタマイズできます。詳細については、ドキュメントを確認してください。

sectionSelector: (デフォルト .section) プラグインのセクションに使用される jQuery セレクターを定義します。fullpage.js と同じセレクターを使用する他のプラグインで問題が発生するのを回避するために、場合によっては変更が必要になることがあります。

slideSelector: (デフォルト .slide) プラグインのスライドに使用される jQuery セレクターを定義します。fullpage.js と同じセレクターを使用する他のプラグインで問題が発生するのを回避するために、場合によっては変更が必要になることがあります。

responsiveWidth: (デフォルト 0) ピクセル単位で定義された幅では、通常のスクロール (autoScrolling:false) が使用されます。ユーザーが独自のレスポンシブ CSS に使用したい場合に備えて、body タグにクラス fp-responsive が追加されます。たとえば、900 に設定すると、ブラウザの幅が 900 未満のときはいつでも、プラグインは通常のサイトのようにスクロールします。

responsiveHeight: (デフォルト 0) ピクセル単位で定義された高さ以下では、通常のスクロール (autoScrolling:false) が使用されます。ユーザーが独自のレスポンシブ CSS に使用したい場合に備えて、body タグにクラス fp-responsive が追加されます。たとえば、900 に設定すると、ブラウザの高さが 900 未満のときはいつでも、プラグインは通常のサイトのようにスクロールします。

responsiveSlides: (デフォルトは false) fullpage.js の拡張。true に設定すると、レスポンシブ モードが起動されたときにスライドが垂直セクションに変換されます (上記の responsiveWidth または responsiveHeight オプションを使用)。fullpage.js >= 2.8.5 が必要です。

parallax: (デフォルトは false) fullpage.js の拡張機能。セクション/スライドで視差背景効果を使用するかどうかを定義します。視差オプションの適用方法の詳細については、こちらをご覧ください。

parallaxOptions: (デフォルト: { type: 'reveal'、 percentage: 62、 property: 'translate'})。parallax:true オプションを使用する場合、視差背景効果のパラメータを設定できます。視差オプションの適用方法の詳細については、こちらをご覧ください。

lazyLoading: (デフォルトは true) 遅延読み込みはデフォルトでアクティブです。つまり、遅延読み込みドキュメントで説明されているように、属性 data-src を含むすべてのメディア要素が遅延読み込みされます。他の遅延読み込みライブラリを使用する場合は、この fullpage.js 機能を無効にできます。

方法
実際に動いているところをここで見ることができます

セクションを上へ移動()
デモ 1 セクション上にスクロールします:

$.fn.fullpage.moveSectionUp();
セクションを下へ移動します()
デモ 1 セクション下にスクロールします:

セクションを下に移動する
moveTo(セクション、スライド)
デモ ページを指定されたセクションとスライドまでスクロールします。デフォルトで表示される最初のスライドのインデックスは 0 になります。

/*アンカーリンク `firstSlide` のあるセクションと 2 番目のスライドまでスクロールします */
$.fn.fullpage.moveTo('firstSlide', 2);
//サイトの3番目のセクションまでスクロールします
フルページを移動するには、次のようにします。

//これは以下と同じです
フルページを移動する
silentMoveTo(セクション、スライド)
デモ moveTo とまったく同じですが、この場合はアニメーションなしでスクロールを実行します。目的地に直接ジャンプします。

/*アンカーリンク `firstSlide` のあるセクションと 2 番目のスライドまでスクロールします */
$.fn.fullpage.silentMoveTo('firstSlide', 2);
スライドを右に移動する()
デモ 現在のセクションの水平スライダーを次のスライドにスクロールします。

スライドを右に移動します。
スライド左へ移動()
デモ 現在のセクションの水平スライダーを前のスライドまでスクロールします。

$.fn.fullpage.moveSlideLeft();
自動スクロールを設定する(ブール値)
デモ リアルタイムでスクロール構成を設定します。ページのスクロールの動作を定義します。true に設定すると、「自動」スクロールが使用され、そうでない場合は、サイトの「手動」または「通常」のスクロールが使用されます。

$.fn.fullpage.setAutoScrolling(false);
セクションに合わせる(ブール値)
デモ セクションを画面に収めるかどうかを決定するオプション fitToSection の値を設定します。

セクションにフィットするように設定
セクションに合わせる()
デモ ビューポートに収まる最も近いアクティブ セクションまでスクロールします。

セクションにフィットする
setLockAnchors(ブール値)
デモ アンカーが URL に影響を及ぼすかどうかを決定するオプション lockAnchors の値を設定します。

$.fn.fullpage.setLockAnchors(false);
setAllowScrolling(boolean, [方向])
デモ マウス ホイール/トラックパッドまたはタッチ ジェスチャ (デフォルトで有効) を使用してセクション/スライドをスクロールする可能性を追加または削除します。これによりキーボード スクロールが無効になるわけではないことに注意してください。そのためには、setKeyboardScrolling を使用する必要があります。

directions: (オプション パラメータ) 許可される値: all、up、down、left、right、または down、right のようにコンマで区切られたそれらの組み合わせ。スクロールを有効または無効にする方向を定義します。
//スクロールを無効にする
$.fn.fullpage.setAllowScrolling(false);

//スクロールダウンを無効にする
$.fn.fullpage.setAllowScrolling(false, 'down');

//下と右へのスクロールを無効にする
$.fn.fullpage.setAllowScrolling(false, '下、右');
setKeyboardScrolling(boolean, [方向])
デモ キーボードを使用してセクションをスクロールする可能性を追加または削除します (デフォルトで有効)。

directions: (オプション パラメータ) 許可される値: all、up、down、left、right、または down、right のようにコンマで区切られたそれらの組み合わせ。スクロールを有効または無効にする方向を定義します。
//すべてのキーボードスクロールを無効にする
$.fn.fullpage.setKeyboardScrolling(false);

//キーボードによるスクロールダウンを無効にする
$.fn.fullpage.setKeyboardScrolling(false, 'down');

//キーボードによる下と右へのスクロールを無効にする
$.fn.fullpage.setKeyboardScrolling(false, '下、右');
レコード履歴を設定する(ブール値)
デモ URL 内のハッシュ変更ごとに履歴を記録するかどうかを定義します。

$.fn.fullpage.setRecordHistory(false);
setScrollingSpeed(ミリ秒)
デモ スクロール速度をミリ秒単位で定義します。

スクロール速度を700に設定します。
破壊(タイプ)
デモ プラグイン イベントと、オプションで HTML マークアップおよびスタイルを破棄します。AJAX を使用してコンテンツを読み込む場合に最適です。

type: (オプションのパラメータ) は空または all にすることができます。all が渡された場合、fullpage.js で使用される HTML マークアップとスタイルは削除されます。この方法では、プラグインの変更が行われる前に使用されていた元の HTML マークアップが維持されます。
//fullPage.js によって作成されたすべての Javascript イベントを破棄します (スクロール、URL のハッシュ変更など)
フルページを破棄します。

// すべての Javascript イベントと、fullPage.js によって元の HTML マークアップに対して行われた変更を破棄します。
$.fn.fullpage.destroy('すべて');
再構築()
新しいウィンドウのサイズやその内容に合わせて DOM 構造を更新します。特に scrollOverflow:true を使用する場合は、AJAX 呼び出しやサイトの DOM 構造の外部変更と組み合わせて使用​​するのが最適です。

$.fn.fullpage.reBuild();
レスポンシブを設定する(ブール値)
デモ ページのレスポンシブ モードを設定します。true に設定すると、自動スクロールはオフになり、結果は responsiveWidth または responsiveHeight オプションが実行されたときとまったく同じになります。

フルページをレスポンシブに設定します。
レスポンシブスライド.toSections()
fullpage.js の拡張機能。fullpage.js >= 2.8.5 が必要です。水平スライドを垂直セクションに変換します。

レスポンシブスライド
レスポンシブスライド.toSlides()
fullpage.js の拡張。fullpage.js >= 2.8.5 が必要です。元のスライド (現在は垂直セクションに変換されています) を再び水平スライドに戻します。

レスポンシブスライド
コールバック
デモ 動作をここで確認できます。

afterLoad (アンカーリンク、インデックス)
スクロールが終了した後、セクションが読み込まれるとコールバックが起動します。パラメータ:

アンカーリンク: セクションに対応するアンカーリンク。
index: セクションのインデックス。1 から始まります。
プラグインでアンカーリンクが定義されていない場合は、インデックス パラメータのみが使用されます。

例：

$('#fullpage').fullpage({
    アンカー: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterLoad: 関数(アンカーリンク、インデックス){
        var ロードされたセクション = $(this);

        //インデックスを使用する
        if(インデックス == 3){
            alert("セクション 3 の読み込みが終了しました");
        }

        //アンカーリンクを使用する
        if(アンカーリンク == 'secondSlide'){
            alert("セクション 2 の読み込みが終了しました");
        }
    }
});
onLeave (インデックス、次のインデックス、方向)
このコールバックは、ユーザーがセクションを離れ、新しいセクションに移行するときに起動されます。false を返すと、移動が実行される前にキャンセルされます。

パラメータ:

index: 出発セクションのインデックス。1 から始まります。
nextIndex: 宛先セクションのインデックス。1 から始まります。
方向: スクロール方向に応じて値が上または下に移動します。
例：

$('#fullpage').fullpage({
    onLeave: 関数(インデックス、次のインデックス、方向){
        var セクションを離れる = $(this);

        //セクション2を離れた後
        if(インデックス == 2 && 方向 == '下'){
            alert("セクション3に進みます!");
        }

        そうでない場合、(インデックス == 2 && 方向 == '上'){
            alert("セクション 1 に進みます!");
        }
    }
});
スクロールが実行される前にキャンセルする
onLeave コールバックで false を返すことでスクロールをキャンセルできます。

$('#fullpage').fullpage({
    onLeave: 関数(インデックス、次のインデックス、方向){
        // 移動先が3番目のセクションの場合はスクロールしません
        if(次のインデックス == 3){
            false を返します。
        }
    }
});
afterRender()
このコールバックは、ページの構造が生成された直後に実行されます。これは、他のプラグインを初期化したり、ドキュメントの準備が必要なコードを実行したりするために使用するコールバックです (このプラグインは、結果の構造を作成するために DOM を変更するため)。詳細については、FAQ を参照してください。

例：

$('#fullpage').fullpage({
    afterRender: 関数(){
        var プラグインコンテナ = $(this);
        alert("結果のDOM構造が準備完了です");
    }
});
afterResize()
このコールバックは、ブラウザのウィンドウのサイズを変更した後に呼び出されます。セクションのサイズが変更された直後です。

例：

$('#fullpage').fullpage({
    afterResize: 関数(){
        var プラグインコンテナ = $(this);
        alert("セクションのサイズ変更が完了しました");
    }
});
afterResponsive(isResponsive)
このコールバックは、fullpage.js が通常モードからレスポンシブ モードに変更された後、またはレスポンシブ モードから通常モードに変更された後に起動されます。

パラメータ:

isResponsive: レスポンシブ モードに入るか (true)、通常モードに戻るか (false) を決定するブール値。
例：

$('#fullpage').fullpage({
    afterResponsive: 関数(isResponsive){
        alert("レスポンシブかどうか: " + isResponsive);
    }
});
afterSlideLoad (アンカーリンク、インデックス、スライドアンカー、スライドインデックス)
スクロールが終了した後、セクションのスライドが読み込まれるとコールバックが起動します。パラメータ:

アンカーリンク: セクションに対応するアンカーリンク。
index: セクションのインデックス。1 から始まります。
slideAnchor: スライドに対応するアンカー（ある場合）
slideIndex: スライドのインデックス。1 から始まります。(デフォルトのスライドはスライドとしてではなく、セクションとしてカウントされます)
スライドにアンカーリンクが定義されていない場合は、slideIndex パラメータのみが使用されます。例:

$('#fullpage').fullpage({
    アンカー: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],

    afterSlideLoad: 関数(アンカーリンク、インデックス、スライドアンカー、スライドインデックス) {
        var loadedSlide = $(this);

        //2番目のセクションの最初のスライド
        if(アンカーリンク == 'secondPage' && スライドインデックス == 1){
            alert("最初のスライドが読み込まれました");
        }

        //2番目のセクションの2番目のスライド（#secondSlideが
        //2 番目のスライドのアンカー)
        if(index == 2 && slideIndex == 'secondSlide'){
            alert("2 番目のスライドが読み込まれました");
        }
    }
});
onSlideLeave (アンカーリンク、インデックス、スライドインデックス、方向、次のスライドインデックス)
このコールバックは、ユーザーがスライドを離れて別のスライドに移動し、新しいスライドに移行するときに起動されます。false を返すと、移動が実行される前にキャンセルされます。

パラメータ:

アンカーリンク: セクションに対応するアンカーリンク。
index: セクションのインデックス。1 から始まります。
slideIndex: スライドのインデックス。0 から始まります。
direction: スクロール方向に応じて右または左の値を取得します。
nextSlideIndex: 移動先スライドのインデックス。0 から始まります。
例：

$('#fullpage').fullpage({
    onSlideLeave: 関数(アンカーリンク、インデックス、スライドインデックス、方向、次のスライドインデックス){
        var leavingSlide = $(this);

        //第2セクションの最初のスライドを右に残す
        if(index == 2 && slideIndex == 0 && direction == 'right'){
            alert("フィストスライドを終了します!!");
        }

        //第2セクションの3番目のスライドを左に残す
        if(index == 2 && slideIndex == 2 && direction == 'left'){
            alert("スライド2に進みます!");
        }
    }
});
移動を実行する前にキャンセルする
onSlideLeave コールバックで false を返すことで移動をキャンセルできます。onLeave で移動をキャンセルする場合と同じです。