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

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

1.fullpage.js ダウンロードアドレス

https://github.com/alvarotrigo/fullPage.js

2.fullPage.js は、フルスクリーンの Web サイトを簡単に便利に作成できる jQuery ベースのプラグインです。主な機能は次のとおりです。

  • マウススクロールをサポート
  • 前進、後退、キーボードコントロールをサポート
  • 複数のコールバック関数
  • 携帯電話とタブレットのタッチイベントをサポート
  • CSS3アニメーションをサポート
  • ウィンドウスケーリングをサポート
  • ウィンドウのサイズが変更されたときに自動的に調整する
  • スクロール幅、背景色、スクロール速度、ループ オプション、コールバック、テキストの配置などを設定できます。

3.以下のファイルを対応するHTMLページに導入する

<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>

4. <body> セクション

/*クリック可能なナビゲーションを追加*/
<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>

5.js部分

<スクリプト>
$(関数(){
    $('#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 で移動をキャンセルする場合と同じです。

6. 構成

オプション

オプションタイプデフォルト値例示する
垂直中央揃え真実コンテンツが垂直方向に中央揃えされているかどうか
サイズ変更ブール間違いフォントがウィンドウサイズに合わせて拡大縮小されるかどうか
スライドカラー関数なし背景色を設定する
アンカー配列なしアンカーリンクを定義する
スクロール速度整数700スクロール速度(ミリ秒)
緩和イーズインクォートスクロールアニメーションモード
メニューブール間違いメニューをバインドし、アンカーの値に対応する関連プロパティを設定すると、メニューはスクロールを制御できます。
ナビゲーションブール間違いプロジェクトナビゲーションを表示するかどうか
ナビゲーション位置プロジェクトナビゲーションの位置(左または右)
ナビゲーションカラー#000プロジェクトナビゲーションの色
ナビゲーションツールチップ配列ヌルプロジェクトナビゲーションのヒント
スライドナビゲーションブール間違い左右のスライダーのアイテムナビゲーションを表示するかどうか
スライドナビゲーション位置左右のスライダー項目ナビゲーションの位置(オプションで上または下)
コントロール矢印カラー#fff左右のスライダー矢印の背景色
ループボトムブール間違い一番下までスクロールした後に一番上までスクロールするかどうか
ループトップブール間違い一番上までスクロールした後、一番下までスクロールするかどうか
ループ水平ブール真実左右のスライダーがループ状にスライドするかどうか
自動スクロールブール真実プラグインのスクロール方法を使用するかどうか。false を選択した場合は、ブラウザの組み込みスクロール バーが表示されます。
スクロールオーバーフローブール間違いコンテンツが全画面を超えたときにスクロールバーを表示するかどうか
CSS3ブール間違いスクロールにCSS3変換を使用するかどうか
パディングトップ0上からの距離
パディング下部0底からの距離
固定要素なし
通常のスクロール要素なし
キーボードスクロールブール真実ナビゲーションにキーボードの矢印キーを使用するかどうか
タッチ感度整数5
連続垂直ブール間違いループでスクロールするかどうか。loopTop および loopBottom とは互換性がありません。
アンカーをアニメーション化ブール真実
通常のスクロール要素タッチしきい値整数5

方法

名前例示する
セクションを上へ移動()上にスクロール
セクションを下へ移動します()下にスクロール
moveTo(セクション、スライド)スクロール
スライドを右に移動する()スライドして右にスクロール
スライド左へ移動()スライドして左にスクロール
自動スクロールを設定する()ページスクロールモードを設定します。trueに設定すると自動的にスクロールします。
スクロールを許可する()マウスホイール/トラックパッドコントロールの追加または削除
キーボードスクロールを設定する()キーボードの矢印キーコントロールを追加または削除する
スクロール速度を設定する()ミリ秒単位でスクロール速度を定義します

コールバック関数

名前例示する
アフロード特定の画面にスクロールした後のコールバック関数は、アンカーリンクとインデックスの2つのパラメーターを受け取ります。
オンリーブスクロールする前のコールバック関数は、3つのパラメーターを受信します。インデックス、nextIndex、および方向:インデックスは、1から開始する「ページ」のシリアル番号です。

NextIndexは、1から始まる「ページ」のインデックスです。

方向は、上にスクロールするか、下にスクロールするか、値が上下するかどうかを決定します。

アフターレンダーページ構造が生成された後のコールバック関数、またはページの初期化が完了した後のコールバック関数
afterslideload特定の水平スライダーにスクロールした後のコールバック関数は、Anchorlink、Index、SlideIndex、および方向の4つのパラメーターを受信するAfterloadに似ています。
ounslideleave特定の水平スライダースクロールの前のコールバック関数は、Anchorlink、Index、SlideIndex、および方向の4つのパラメーターを受信するOnLeaveに似ています。

これは、fullpage.jsのfullpage.jsの特定の使用に関する記事です。

以下もご興味があるかもしれません:
  • FullPage.js最終画面スクロール方法
  • fullpage.jsとcss3は、fullpage.jsを実現します
  • フルスクリーンスクロールプラグインFullPage.js例の分析を使用します
  • fullpage.jsフルスクリーンスクロールプラグインの使用例
  • Fullpage.js 固定ナビゲーション バー - ナビゲーション バーの配置の実装

<<:  MySQL パフォーマンスの最適化: インデックスを効率的かつ正しく使用する方法

>>:  VSCode の Remote-SSH を使用して Linux に接続し、リモート開発を行う

推薦する

VMware Workstation 12 Pro Linux インストール チュートリアル

この記事は、VMware Workstation 12 ProのインストールLinuxチュートリアル...

IE6/7 で絶対配置された要素が不可解に消えたりブロックされたりする問題を解決する方法

1. 絶対配置レイヤーの隣接フローティング レイヤーの幅が親レイヤーの幅と等しくなく、フロートがクリ...

Navicatをサーバー上のdockerデータベースに接続する方法

dokekrでmysqlコンテナを起動するコマンドを使用します: docker run -p 330...

Linux で at および cron スケジュールタスクをカスタマイズする方法

Linux システムには 2 種類のスケジュールされたタスクがあります。1 つは 1 回だけ実行され...

CentOS仮想マシンの時刻を変更する方法

上はシステム時間、下はハードウェア時間です。ここでは変更を加えているので、同じくらいの速さになってい...

jQuery で呼吸カルーセル効果を実現

この記事では、呼吸カルーセル効果を実現するためのjQueryの具体的なコードを参考までに共有します。...

この記事では、Vue 3.0 レスポンシブの使い方を説明します。

目次ユースケースリアクティブAPI関連プロセス反応的なcreateReactiveObjectはレス...

Vueでスケルトンスクリーンを実装する例

目次スケルトンスクリーンの使用Vueアーキテクチャスケルトンスクリーンアイデアの概要抽象コンポーネン...

Linuxの読み取りコマンドの使用

1. コマンドの紹介read コマンドは、シェルの組み込みコマンドで、標準入力または -u オプショ...

JavaScript の非同期処理で待機時間を節約できますか?

JavaScriptで非同期実行の結果を同期的に取得するには、 for ループ内でawaitを使用...

スペース均等互換性の問題を解決する2つの方法についての簡単な説明

flex は 2009 年のリリース以来、ほぼすべてのブラウザでサポートされています。シンプルでレス...

Vue で Openlayer を使用して読み込みアニメーション効果を実現する

注意: スコープアニメーションは使用できません。 ! ! ! GIF経由 <テンプレート>...

JavaScript の navigator.userAgent がブラウザ情報を取得するケースの説明

ブラウザはおそらく私たちにとって最も馴染みのあるツールです。 Firefox、Opera、Safar...

Vue+SpringBoot+Shiroのクロスドメイン問題を解決する

目次1. Vueフロントエンドを構成する1. クロスドメイン構成を開発する2. 本番環境のクロスドメ...

Windows 10 64 ビット版に MySQL 5.6.35 をインストールするためのグラフィック チュートリアル

1. MySQL Community Server 5.6.35をダウンロードするダウンロードアドレ...