fullPage.js4.0.31

preview compatibility

| Created by @imac2

fullPage.jsはシンプルで使いやすいライブラリで、全画面のスクロールページ（シングルページウェブサイトまたはワンページサイトとも呼ばれます）を作成できます。
また、サイトのそれぞれのセクション内に横向きのスライダーを追加することも可能です。

はじめにはじめに

機能の要望だけでなく、コーディングスタイルの改善についても提案を歓迎します。皆さんの生産性を向上するために、素晴らしいライブラリにしましょう！

互換性互換性

fullPage.jsはすべての最新ブラウザおよびIE 11で完全に機能します。IE < 11をサポートする必要がある場合は、fullPage.js v3を使用してください。また、スマートフォン、タブレット、タッチパネルディスプレイもサポートしています。

fullpage.jsをサポートしてくれるBrowserstackに多大なる感謝を申し上げます。

ライセンスライセンス

商用ライセンス商用ライセンス

fullPageを使用して非オープンソースのサイト、テーマ、プロジェクト、アプリケーションを開発したい場合は、商用ライセンスが適切です。このオプションでは、ソースコードはプロプライエタリとして保持されます。つまり、アプリケーションの全ソースコードをオープンソースライセンスに変更する必要はありません。Fullpage商用ライセンスの購入

オープンソースライセンスオープンソースライセンス

GNU GPL v3ライセンスと互換性のあるオープンソースアプリケーションを作成している場合は、GPLv3の条件に基づいてfullPageを使用することができます。

fullPage.jsが使用されていることを明示的に示す必要があります。JavaScriptおよびCSSファイルのクレジットコメントはそのまま残してください。（他ソースコードとの結合やミニファイ後も）

fullPageのライセンスについて詳しく読む

使用方法使用方法

例のファイルでわかるように、以下を含める必要があります：

JavaScriptファイル fullpage.js（またはその最小化バージョン fullpage.min.js）
CSSファイル fullpage.css

オプション css3:falseを使用する場合、ライブラリに含まれているイージング効果（easeInOutCubic）以外の効果を使用したい場合は、easingsファイルを追加してください。

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オプションを使用し、"easeInOutCubic"以外のイージング効果を使用したい場合にのみ必要です。 -->
<script src="vendors/easings.min.js"></script>

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

Webpack、Browserify、またはRequire.jsを使用している場合は、モジュールローダーを使用したfullPage.jsの使い方を確認してください。

オプション CDNの使用オプション CDNの使用

CDNを使用してfullPageを利用したい場合、CDNJSを利用できます： https://cdnjs.com/libraries/fullPage.js

初期化初期化

Vanilla Javascriptでの初期化Vanilla Javascriptでの初期化

</body>タグの直前で<script>タグを利用して、fullPage.jsを呼び出すだけです。

コピーnew fullpage('#fullpage', {
    //オプションはここに
    autoScrolling: true,
    scrollHorizontally: true
});

jQueryでの初期化jQueryでの初期化

fullpage.jsをjQueryプラグインとして使用することもできます！

コピー$(document).ready(function() {
    $('#fullpage').fullpage({
        //オプションはここに
        autoScrolling: true,
        scrollHorizontally: true
    });

    // fullpage.jsメソッドの使用例
    $.fn.fullpage.setAllowScrolling(false);
});

すべてのオプションを設定したVanilla JSの例すべてのオプションを設定したVanilla JSの例

すべてのオプションを設定したより複雑な初期化は次のようになります。

コピー
var myFullpage = 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){}
});

セクションやスライドへのリンク作成セクションやスライドへのリンク作成

セクションのアンカーリンクを使用している場合（anchorsオプションまたは各スライドのdata-anchor属性を使用）、
セクション内の特定のスライドに直接移動するためのアンカーリンクも使用できます。

以下がアンカー付きのリンクの例です。
https://alvarotrigo.com/fullPage/#secondPage/2（手動でそのセクション/スライドにアクセスすると表示されるURL）
URLの最後の部分は#secondPage/2で終わります。

次の初期化を行うと：

コピーnew fullpage('#fullpage', {
    anchors:['firstPage', 'secondPage', 'thirdPage']
});

URLの末尾にあるアンカー#secondPage/2はそれぞれセクションとスライドの位置を示します。
#secondPage/2の場合、セクションはアンカーsecondPageで定義されたもので、スライドはインデックス2であるためため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>

この場合、使用するURLは#secondPage/slide3で、前の#secondPage/2と同等です。

セクションアンカーも同様に定義でき、anchors配列が提供されていない場合はdata-anchor属性を使用します。

注意！ data-anchorタグの値は、サイト上の任意のID要素（またはIEのNAME要素）と同じ値を持つことはできません。

小さなセクションや大きなセクションの作成小さなセクションや大きなセクションの作成

デモ fullPage.jsはセクションやスライドのフルハイト制限(全画面制限)を解除する方法を提供します。
これにより、ビューポートよりも小さいまたは大きいセクションを作成することが可能です。
これはフッターに最適です。すべてのセクションにこの機能を適用するのは適切ではありません。
すべてのセクションに適用すると、サイトの初期読み込み時に複数のセクションがビューポート内に既に存在するため、fullPage.jsは次のセクションを見るためにうまくスクロールできないかもしれません。

フルハイト(全画面)を解除するには、fp-auto-heightクラスを適用したいセクションに使用します。
セクション/スライドのコンテンツによって定義された高さが適用されます。

コピー<div class="section">Whole viewport</div>
<div class="section fp-auto-height">Auto height</div>

レスポンシブオートハイトセクションレスポンシブオートハイトセクション

デモレスポンシブオートハイトはfp-auto-height-responsiveクラスを使用して適用できます。
レスポンシブモードが発動するまでセクションはフルスクリーンになります。
レスポンシブモードが発動すると、コンテンツに必要なサイズとなります。

fullpage.jsによって追加される状態クラスfullpage.jsによって追加される状態クラス

fullpage.jsはサイトの表示状態を管理するために異なる要素に複数のCSSクラスを追加します。

activeは現在表示されているセクションとスライドに追加されます。
activeは現在のメニュー要素（menuオプションを使用している場合）に追加されます。
fp-viewing-SECTION-SLIDE形式のクラスがサイトのbody要素に追加されます。（例：fp-viewing-secondPage-0）SECTIONおよびSLIDE部分は現在のセクションおよびスライドのアンカー（またはアンカーが提供されていない場合はインデックス）です。
レスポンシブモードに入るとfp-responsiveがbody要素に追加されます
fullPage.jsが有効な場合html要素にfp-enabledが追加されます。（削除するとうまく動きません）。
fullPage.jsが破棄されるとfp-destroyedがfullpage.jsコンテナに追加されます。

遅延読み込み遅延読み込み

デモ fullPage.jsは画像、動画、および音声要素の遅延読み込み(Lazy Loading)を提供し、サイト読み込みの低速化、不要なデータ転送を抑止可能です。
遅延読み込みを使用する場合、要素がビューポートに入ったときにのみ読み込まれます。
遅延読み込みを有効にするには、次のように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の遅延読み込みを無効にできます。

埋め込まれたメディアの自動再生/一時停止埋め込まれたメディアの自動再生/一時停止

デモ注意：自動再生機能は、OSやブラウザによっては一部のモバイルデバイスで動作しない場合があります（例：iOSのSafariバージョン < 10.0）。

セクション/スライドの読み込み時に再生：セクション/スライドの読み込み時に再生：

動画や音声に対してautoplay属性を使用するか、YouTubeのiframeに対してautoplay=1パラメータを使用すると、ページの読み込み時にメディア要素が再生されます。セクション/スライドの読み込み時に再生するには、代わりにdata-autoplay属性を使用します。
例：

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

離脱時の一時停止離脱時の一時停止

埋め込まれたHTML5<video> / <audio>およびYouTubeの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）の代わりに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

（デフォルト null）このオプションは必須です。 fullPageを非オープンソースプロジェクトで使用する場合、fullPage商用ライセンスの購入時に提供されたライセンスキーを使用する必要があります。プロジェクトがオープンソースであり、GPLv3ライセンスと互換性がある場合、gplv3-licenseオプションを使用できます。ライセンスについての詳細はこちらおよびウェブサイトをご覧ください。使用例：

コピーnew fullpage('#fullpage', {
    licenseKey: 'あなたのキーをここに入力'
});