lang/japanese/README.md
<p align="center"> <a href="https://github.com/alvarotrigo/fullPage.js">English</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/spanish#fullpagejs">Español</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/french#fullpagejs">Français</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/russian#fullpagejs">Pусский</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/chinese#fullpagejs">中文</a> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/korean#fullpagejs">한국어</a> | <span>日本語</span> | <a href="https://github.com/alvarotrigo/fullPage.js/tree/master/lang/brazilian-portuguese#fullpagejs">Português Brasileiro</a> </p> <p align="center"> Available for <a href="https://github.com/alvarotrigo/vue-fullpage.js">Vue</a>, <a href="https://github.com/alvarotrigo/react-fullpage">React</a> and <a href="https://github.com/alvarotrigo/angular-fullpage">Angular</a>. </p>
| 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.js（またはその最小化バージョン fullpage.min.js）fullpage.cssオプション css3:falseを使用する場合、ライブラリに含まれているイージング効果（easeInOutCubic）以外の効果を使用したい場合は、easingsファイルを追加してください。
オプション 要に応じて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を使用してfullPage.jsを利用したい場合、JSDelivr、UNPKG、CDNJS を利用できます。
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>
HTML構造の詳細な例はsimple.htmlファイルで確認できます。
</body>タグの直前で<script>タグを利用して、fullPage.jsを呼び出すだけです。
new fullpage('#fullpage', {
//オプションはここに
autoScrolling: true,
scrollHorizontally: true
});
fullpage.jsをjQueryプラグインとして使用することもできます！
$(document).ready(function() {
$('#fullpage').fullpage({
//オプションはここに
autoScrolling: true,
scrollHorizontally: true
});
// fullpage.jsメソッドの使用例
$.fn.fullpage.setAllowScrolling(false);
});
すべてのオプションを設定したより複雑な初期化は次のようになります。
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,
adjustOnNavChange: true,
// アクセシビリティ
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,
cinematic: false,
cinematicOptions: [Object],
effects: false,
effectsOptions: [Object],
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はサイトの表示状態を管理するために異なる要素に複数のCSSクラスを追加します。
activeは現在表示されているセクションとスライドに追加されます。activeは現在のメニュー要素（menuオプションを使用している場合）に追加されます。fp-loaded は、メディアコンテンツの遅延読み込みをトリガーするセクションまたはスライドの要素に追加されます。fp-viewing-SECTION-SLIDE形式のクラスがサイトのbody要素に追加されます。（例：fp-viewing-secondPage-0）SECTIONおよびSLIDE部分は現在のセクションおよびスライドのアンカー（またはアンカーが提供されていない場合はインデックス）です。fp-responsiveがbody要素に追加されますhtml要素にfp-enabledが追加されます。（削除するとうまく動きません）。fp-destroyedがfullpage.jsコンテナに追加されます。デモ fullPage.jsは画像、動画、および音声要素の遅延読み込み(Lazy Loading)を提供し、サイト読み込みの低速化、不要なデータ転送を抑止可能です。
遅延読み込みを使用する場合、要素がビューポートに入ったときにのみ読み込まれます。
遅延読み込みを有効にするには、次のようにsrc属性をdata-srcに変更するだけです。
<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>
各拡張機能にはアクティベーションキーとライセンスキーが必要です。詳細についてはこちらをご覧ください
その後、オプションで説明されているように、それらを使用および構成できます。
（デフォルト null）このオプションは必須です。 fullPageを非オープンソースプロジェクトで使用する場合、fullPage商用ライセンスの購入時に提供されたライセンスキーを使用する必要があります。プロジェクトがオープンソースであり、GPLv3ライセンスと互換性がある場合、gplv3-licenseオプションを使用できます。ライセンスについての詳細はこちらおよびウェブサイトをご覧ください。使用例：
new fullpage('#fullpage', {
licenseKey: 'あなたのキーをここに入力'
});
（デフォルト true）スライドを右または左に移動するためのコントロール矢印を使用するかどうかを決定します。
（デフォルト ['<div class="fp-arrow"></div>', '<div class="fp-arrow"></div>'],）
水平スライド用のコントロール矢印に適用するHTML構造およびクラスを定義する方法を提供します。配列には両方の矢印の構造が含まれます。最初のアイテムは左矢印で、2番目のアイテムは右矢印です。
（デフォルト true）フレックスボックスを使用してコンテンツを垂直方向に中央に配置します。潜在的な問題を避けるためにコンテンツをdivでラップすることをお勧めします。（flex-direction: column; display: flex; justify-content: center;を使用します）
（デフォルト 700）スクロールトランジションの速度（ミリ秒単位）。
（デフォルト none）各セクションのCSS background-colorプロパティを定義します。
例：
new fullpage('#fullpage', {
sectionsColor: ['#f2f2f2', '#4BBFC3', '#7BAABE', 'whitesmoke', '#000'],
});
（デフォルト []）各セクションのURLに表示されるアンカーリンク（#example）を定義します。
アンカー値は一意である必要があります。
配列内のアンカーの位置が、アンカーが適用されるセクションの位置と一致します。（2番目の位置は2番目のセクションに適用されるなど）。
アンカーを使用することで、ブラウザの前後ナビゲーションも可能になり、ユーザーは特定のセクションやスライドをブックマークすることができます。
注意！ アンカーはサイト上の任意のID要素（またはIEのNAME要素）と同じ値を持つことはできません。
アンカーはHTML構造内でdata-anchor属性を使用して直接定義することもできます。
（デフォルト false）URL内のアンカーがライブラリに影響を与えるかどうかを決定します。
アンカーを内部で自分の関数やコールバックに使用できますが、サイトのスクロールには影響を与えません。
他のプラグインとアンカーを組み合わせて使用する場合に便利です。
（デフォルト easeInOutCubic）縦および横のスクロールに使用するトランジション効果を定義します。
一部のトランジションを使用するには、vendors/easings.min.jsファイルまたはjQuery UIが必要です。
他のライブラリを代わりに使用することもできます。
（デフォルト ease）css3:trueを使用する場合のトランジション効果を定義します。
linear、ease-outなどの事前定義されたものを使用するか、cubic-bezier関数を使用して独自のものを作成できます。
Matthew Lein CSS Easing Animation Toolを使用することをお勧めします。
（デフォルト false）最初のセクションで上にスクロールすると最後のセクションにスクロールするかどうかを定義します。
（デフォルト false）最後のセクションで下にスクロールすると最初のセクションにスクロールするかどうかを定義します。
（デフォルト true）横向きのスライダーが最後または最初のスライドに達した後にループするかどうかを定義します。
（デフォルト true）セクションおよびスライド内でスクロールするためにJavaScriptまたはCSS3トランスフォームを使用するかどうかを定義します。
タブレットやモバイルデバイスのブラウザでCSS3をサポートしている場合に動きを高速化するのに便利です。
このオプションがtrueに設定されていてブラウザがCSS3をサポートしていない場合は、代替手段が使用されます。
（デフォルト true）"自動"スクロールを使用するか、"通常"のスクロールを使用するかを定義します。
また、タブレットやモバイルデバイスでセクションがブラウザ/デバイスウィンドウにどのように適合するかにも影響します。
（デフォルト true）セクションをビューポートに適合させるかどうかを決定します。
trueに設定すると、現在のアクティブなセクションは常にビューポート全体を埋めます。
それ以外の場合、ユーザーはセクションの途中で止めることができます。
（デフォルト 1000）fitToSectionがtrueに設定されている場合、設定されたミリ秒だけフィットを遅らせます。
（デフォルト false）サイトの縦方向のセクションにスクロールバーを使用するかどうかを決定します。
スクロールバーを使用する場合でも、autoScrolling機能は期待通りに動作します。
ユーザーはスクロールバーを使用してサイトをスクロールでき、スクロールが終了するとfullPage.jsはセクションを画面にフィットさせます。
（デフォルト 0）各セクションのトップパディングを数値と単位で定義します。（例：paddingTop: '10px', paddingTop: '10em'）
固定ヘッダーを使用する場合に便利です。
（デフォルト 0）各セクションのボトムパディングを数値と単位で定義します。（例：paddingBottom: '10px', paddingBottom: '10em'）
固定フッターを使用する場合に便利です。
（デフォルト null）プラグインのスクロール構造から除外する要素を定義します。
css3オプションを使用している場合に、これらの要素を固定する必要があります。
これにはJavaScriptセレクターの文字列が必要です。（例：fixedElements: '#element1, .element2'）
（デフォルト null）デモ 一部の要素上で自動スクロールを避けたい場合に使用するオプションです。（マップ、スクロール可能なdivなどに便利）
これにはJavaScriptセレクターの文字列が必要です。（例：normalScrollElements: '#element1, .element2'）
このオプションはセクション/スライド要素自体に適用すべきではありません。
（デフォルト null）デモ scrollOverflow:trueを使用していない場合、ビューポートよりも高さが大きいセクションにスクロールする方法を定義します。（小さなセクションや大きなセクションの作成方法を参照）
デフォルトでは、目的のセクションが上から来る場合は上部にスクロールし、下から来る場合は下部にスクロールします。
可能な値はtop、bottom、nullです。
（デフォルト true）
モバイルのナビゲーションバーやアドレスバーのサイズが変更されたり、表示/非表示が切り替わったときに、fullPage.jsがセクションの高さを調整するかどうかを定義します。false に設定すると、ナビゲーションバーが縮小または非表示になった際にセクションが全高で表示されなくなります。
（デフォルト true）キーボードを使用してコンテンツをナビゲートできるかどうかを定義します。
（デフォルト 5）ブラウザのウィンドウ幅/高さのパーセンテージを定義し、次のセクション/スライドに移動するためにスワイプがどの程度必要かを定義します。
(デフォルト false)。非連続の垂直セクションまたは水平スライド間をナビゲートする際にスクロールアニメーションをスキップするかどうかを決定します。可能な値は true、false、sections、slides で、この動作を垂直方向、水平方向、または両方向に適用できます。
（デフォルト false）最後のセクションで下にスクロールすると最初のセクションにスクロールし、最初のセクションで上にスクロールすると最後のセクションにスクロールするかどうかを定義します。
loopTop、loopBottomまたはサイト内のスクロールバー（scrollBar:trueまたはautoScrolling:false）と互換性はありません。
（デフォルト false）fullpage.jsの拡張機能を参照してください。
最後のスライドを右にスライドすると最初のスライドにスライドし、最初のスライドを左にスライドすると最後のスライドにスライドするかどうかを定義します。 loopHorizontalとは互換性がありません。fullpage.js >= 3.0.1が必要です。
（デフォルト false）fullpage.jsの拡張機能を参照してください。
マウスホイールやトラックパッドを使用してスライダー内を水平にスライドするかどうかを定義します。
autoScrolling:trueを使用する場合にのみ使用できます。
ストーリーテリングデザインに最適です。fullpage.js >= 3.0.1が必要です。
（デフォルト false）fullpage.jsの拡張機能を参照してください。
1つの水平スライダーを移動すると、他のセクション内のスライダーが同じ方向にスライドするかどうかを決定します。
値はtrue、false、または相互ロックされたセクションの配列です。例：[1,3,5]（1から始まります）
fullpage.js >= 3.0.1が必要です。
（デフォルト false）fullpage.jsの拡張機能を参照してください。
マウスや指を使用してセクションやスライドをドラッグおよびフリックする機能を有効または無効にします。
fullpage.js >= 3.0.1が必要です。
可能な値は次のとおりです。
true：機能を有効にします。false：機能を無効にします。vertical：垂直方向にのみ機能を有効にします。horizontal：水平方向にのみ機能を有効にします。fingersonly：タッチデバイスのみで機能を有効にします。mouseonly：デスクトップデバイス（マウスとトラックパッド）でのみ機能を有効にします。（デフォルト false）fullpage.jsの拡張機能を参照してください。
パーセンテージに基づいてフルスクリーンでないセクションを使用する方法を提供します。
次のセクションや前のセクションの一部を表示することで、訪問者に対してサイトに他のコンテンツがあることを示すのに理想的です。
fullPage.js >= 3.0.1が必要です。
各セクションのパーセンテージを定義するには、data-percentage属性を使用する必要があります。
ビューポート内のセクションの中央揃えは、data-centered属性でブール値を使用して決定できます。（指定されていない場合はデフォルトでtrueになります）
例：
<div class="section" data-percentage="80" data-centered="true">
（デフォルト false）fullpage.jsの拡張機能を参照してください。
セクションを離れた後、各スライダーをリセットするかどうかを定義します。
fullpage.js >= 3.0.1が必要です。
（デフォルト false）fullpage.jsの拡張機能を参照してください。
デフォルトのスクロール効果の代わりにフェード効果を使用するかどうかを定義します。
指定可能な値はtrue、false、sections、slidesです。
縦方向または横方向にのみ適用することも、両方に同時に適用することもできます。
autoScrolling:trueを使用する場合にのみ使用できます。
fullpage.js >= 3.0.1が必要です。
（デフォルト true）サイトの読み込み時にアンカー（#）が与えられると、アニメーションで目的地にスクロールするか、直接指定されたセクションに読み込むかを定義します。
（デフォルト true）URLのハッシュ(アンカーリンクなど)変更ごとにサイトのURL履歴にプッシュするかどうかを定義します。
fullpage_api.setRecordHistory(false);
（デフォルト false）セレクターを使用して、セクションとリンクさせるメニューを指定できます。
この方法でセクションのスクロールに応じて、メニュー内の対応する要素にactiveクラスが追加されます。
この機能はメニューを生成するのではなく、指定されたメニュー内の対応するアンカーリンクを持つ要素にactiveクラスをただ追加するだけです。
メニューの要素をセクションとリンクさせるには、セクション内で使用するのと同じアンカーリンクを使用してHTML5のデータ属性 (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'
});
Note: メニュー要素は、css3:trueを使用する際の問題を避けるために、fullpageラッパーの外側に配置する必要があります。そうしないと、プラグインによって bodyに自動的に追加されます。
(デフォルト false) trueに設定すると、小さな円で構成されたナビゲーションバー(バレットナビゲーション)が表示されます。
(デフォルト none) ナビゲーションバーの位置を定義します。
leftまたはrightに設定することができます（ナビゲーションバーを使用する場合）
（デフォルト []）ナビゲーションバーを使用する場合に表示するツールチップを定義します。
例：navigationTooltips: ['firstSlide', 'secondSlide']。
また、各セクションでdata-tooltip属性を使用して定義することもできます。
(デフォルト false) 縦のナビゲーションでアクティブに表示されているセクションに対して、持続的にツールチップを表示します。
(デフォルト false) trueに設定すると、各横向きスライダーに対して小さな円で構成されたナビゲーションバー(バレットナビゲーション)が表示されます。
(デフォルト bottom) スライダー用の横向きナビゲーションバーの位置を定義します。
値としてtop とbottomを指定できます。
また、CSSスタイルを変更して、上端または下端からの距離や色などのスタイルを調整することもできます。
(デフォルト true) セクションやスライドのコンテンツがその高さを超える場合にスクロールを作成するかどうかを定義します。
このオプションにはscrollBar: falseが必要です。
特定のセクションやスライドでfullpage.jsがスクロールバーを作成しないようにするには、クラスfp-noscrollを使用します。
例えば: <div class="section fp-noscroll">
また、セクション要素に fp-auto-height-responsiveを使用することで、レスポンシブモードでscrolloverflowが適用されるのを防ぐこともできます。
(デフォルト false) Extension of fullpage.js.
可能な値はtrue、false、sections、slidesです。
trueに設定すると、別のセクションやスライドに移動する際に、セクションやスライドのコンテンツがスクロールバーで上にスクロールされます。
これにより、下のセクションからスクロールしても、セクションやスライドは常にコンテンツの先頭を表示します。
セクションやスライドにクラスfp-no-scrollOverflowResetを追加すると、その特定のパネルに対してこの機能が無効になります。
(デフォルト false) 有効にすると、デフォルトのスクロールバーの代わりに「Macスタイル」のスクロールバーを使用します。Windowsではかなり異なって見えます。
(デフォルト .section) セクションに使用されるJavaScriptセレクターを変更できます。
fullpage.jsと同じセレクターを使用する他のプラグインとの問題を避けるために、必要に応じて変更する必要があります。
(デフォルト .slide) スライドに使用されるJavaScriptセレクターを変更できます。
fullpage.jsと同じセレクターを使用する他のプラグインとの問題を避けるために、必要に応じて変更する必要があります。
(デフォルト 0) 定義されたピクセル幅以下の場合、通常のスクロール（autoScrolling:false）が使用されます。
ユーザーが独自のレスポンシブCSSに使用したい場合、fp-responsiveクラスがbodyタグに追加されます。
例えば、900に設定すると、ブラウザの幅が900未満の場合、fullpage.jsは通常のサイトのようにスクロールを表示します。
(デフォルト 0) 定義されたピクセル高さ以下の場合、通常のスクロール（autoScrolling:false）が使用されます。
ユーザーが独自のレスポンシブCSSに使用したい場合、fp-responsiveクラスがbodyタグに追加されます。
例えば、900に設定すると、ブラウザの高さが900未満の場合、プラグインは通常のサイトのようにスクロールします。
(デフォルト false) Extension of fullpage.js trueに設定すると、レスポンシブモードが有効になったとき（上記の responsiveWidthまたはresponsiveHeightオプションを使用）、スライドが縦方向のセクションに変わります。
fullpage.js >= 3.0.1が必要です。
（デフォルト：false）fullPage.js の拡張機能。セクションでのスライダーエフェクトを有効または無効にします。fullpage.js >= 4.0.41 が必要です。
（デフォルト：{Object}）cinematic:true オプションを使用する際のコンテンツアニメーションのパラメータを設定できます。詳細はこちら。
（デフォルト：false）fullpage.jsの拡張機能。セクションにスライダー効果を有効または無効にします。fullpage.js >= 4.0.35 が必要です。
（デフォルト：{Object}、"focus" プリセットの設定）。
effects:true オプションを使うときに、効果のパラメータを設定できます。
effects オプションの適用方法について詳しくはこちら
(デフォルト false) Extension of fullpage.js. セクションやスライドにパララックス背景効果を使用するかどうかを指定します。 パララックスオプションの適用方法について詳しく読む
(デフォルト { type: 'reveal', percentage: 62, property: 'translate'}) オプションparallax:true を使用する場合、パララックス背景効果のパラメーターを設定できます。 パララックスオプションの適用方法について詳しく読む
(デフォルト false) Extension of fullpage.js セクションやスライドにドロップ効果を使用するかどうかを指定します。 ドロップ効果オプションの適用方法について詳しく読む
(デフォルト { speed: 2300, color: '#F82F4D', zIndex: 9999}) オプションdropEffect: trueを使用する場合、ドロップ効果のパラメーターを設定できます。ドロップ効果オプションの適用方法について詳しく読む
(デフォルト false) Extension of fullpage.js セクションやスライドにウォーター効果を使用するかどうかを定義します。ウォーター効果オプションの適用方法について詳しく読む
(デフォルト { animateContent: true, animateOnMouseMove: true}) オプションwaterEffect: trueを使用する場合、ウォーター効果のパラメーターを設定できます。ウォーター効果オプションの適用方法について詳しく読む
(デフォルト false) Extension of fullpage.js セクションやスライドにカード効果を使用するかどうかを指定します。 カード効果オプションの適用方法について詳しく読む
(デフォルト true) 遅延読み込みはデフォルトで有効になっており、data-src属性を含むすべてのメディア要素が遅延読み込みされます。
詳細は遅延読み込みドキュメントをご覧ください。 遅延読み込み
他の遅延読み込みライブラリを使用したい場合は、このfullpage.js機能を無効にすることができます。
（デフォルト 0）現在のセクションに対して、隣接する垂直セクションと水平スライドのメディア要素を遅延読み込みする数を指定します。前後のセクションやスライドを何個プリロードするかを数値で指定してください。
(デフォルト: { perspective: 100, fadeContent: true, fadeBackground: true}) オプションcards: trueを使用する場合、カード効果のパラメーターを設定できます。カードオプションの適用方法について詳しく読む
(デフォルト true) ページのHTML構造の変更を監視するかどうかを指定します。
有効にすると、fullPage.jsは変更に自動的に反応し、適宜更新します。
セクションやスライドの追加、削除、非表示にする場合に最適です。
(デフォルト {enabled: true, label: 'Made with fullpage.js', position: 'right'}) fullPage.jsのクレジット表記をするかどうかを指定します。
GPLv3ライセンスの条項0、4、5、および7に従い、GPLv3の下でfullPage.jsを使用する場合は、fullPage.jsが使用されていることを目立つ形で表記する必要があります。
このオプションを有効にして、アトリビューション（帰属表示）を含めることをお勧めします。 注意: このオプションには、有効な licenseKey 値が必要です。
各種提供しているメソッドについて説明します。 メソッドについて
デモ アクティブなセクションのオブジェクトを取得します。(type Section)
fullpage_api.getActiveSection();
デモ アクティブなスライドのオブジェクトを取得します。(type Slide)
fullpage_api.getActiveSlide();
デモ getScrollYはfullPageラッパーのy座標を取得します。
getScrollXはアクティブな横方向スライドのx座標を取得します。
fullpage_api.getScrollY();
fullpage_api.getScrollX();
デモ 一つ上のセクションにスクロールします。
fullpage_api.moveSectionUp();
デモ 一つ下のセクションにスクロールします。
fullpage_api.moveSectionDown();
デモ 指定されたセクションとスライドにスクロールします。
最初のセクションはインデックス1から始まります。
最初のスライド（デフォルトで表示されるスライド）はインデックス0から始まります。
/* アンカーリンク firstSlide のセクションにスクロールし、2番目のスライドに移動します。*/
fullpage_api.moveTo('firstSlide', 2);
//サイト内の3番目のセクション（インデックス3）にスクロールします。
fullpage_api.moveTo(3, 0);
//下記のように指定も可能です。
fullpage_api.moveTo(3);
デモ 機能としてはmoveTo と同じですが、アニメーションなしでスクロールを実行します。目的地への直接ジャンプです。
/* アンカーリンク firstSlide のセクションにスクロールし、2番目のスライドに移動します。 */
fullpage_api.silentMoveTo('firstSlide', 2);
デモ 現在のセクションの横方向スライダーを次のスライドにスクロールします。
fullpage_api.moveSlideRight();
デモ 現在のセクションの横方向スライダーを前のスライドにスクロールします。
fullpage_api.moveSlideLeft();
デモ スクロール設定をリアルタイムで設定します。
ページのスクロールの動作を定義します。
trueに設定すると、「自動」スクロールを使用し、それ以外の場合はサイトの「手動」または「通常」スクロールを使用します
fullpage_api.setAutoScrolling(false);
デモ オプション fitToSectionの値を変更し、セクションを画面にフィットさせるかどうかを決定します。
fullpage_api.setFitToSection(false);
デモ 画面表示上、最も近いアクティブなセクションにスクロールし、それをビューポートにフィットさせます。
fullpage_api.fitToSection();
デモ オプションlockAnchorsの値を変更し、アンカーがURLに影響を与えるかどうかを決定します。
fullpage_api.setLockAnchors(false);
デモ マウスホイール/トラックパッドやタッチジェスチャーを使用してセクション/スライドをスクロールする機能を追加または削除します（デフォルトでは有効）。
なお、このメソッドではキーボードスクロールは無効になりません。キーボードの設定にはsetKeyboardScrollingを使用する必要があります。
directions: (任意の引数です) 許容される値: all, up, down, left, right または、down, rightのようにコンマで区切った組み合わせ。スクロールを有効または無効にする方向を定義します。
//スクロールを無効化
fullpage_api.setAllowScrolling(false);
//下スクロールを無効化
fullpage_api.setAllowScrolling(false, 'down');
//下方向・右方向スクロールを無効化
fullpage_api.setAllowScrolling(false, 'down, right');
デモ キーボードを使用してセクションをスクロールする機能を追加または削除します。（デフォルトで有効）
directions: (任意の引数です) 許容される値: all, up, down, left, right または、down, rightのようにコンマで区切った組み合わせ。スクロールを有効または無効にする方向を定義します。//スクロールを無効化
fullpage_api.setKeyboardScrolling(false);
//下スクロールを無効化
fullpage_api.setKeyboardScrolling(false, 'down');
//下方向・右方向スクロールを無効化
fullpage_api.setKeyboardScrolling(false, 'down, right');
デモ 各URL変更の履歴をブラウザのURL履歴にプッシュするかどうかを定義します。
fullpage_api.setRecordHistory(false);
デモ スクロール速度をミリ秒単位で定義します。
fullpage_api.setScrollingSpeed(700);
デモ fullpage.jsのイベントを削除します。
また、オプションでHTMLマークアップとスタイルを削除できます。
AJAXを使用してコンテンツを読み込む際に有用です。
type：（オプションのパラメータ）空またはallに指定できます。allが指定されると、fullpage.jsが使用したHTMLマークアップとスタイルが削除されます。これにより、fullpage.jsによる変更前の元のHTMLマークアップに戻ります。//fullPage.jsが作成したすべてのJavaScriptイベント（スクロール、URLのハッシュ変更など）を破壊
fullpage_api.destroy();
//すべてのJavaScriptイベントと、fullPage.jsが元のHTMLマークアップに対して行った変更を破壊
fullpage_api.destroy('all');
DOM構造を更新して新しいウィンドウサイズまたはそのコンテンツに適合させます。
AJAX呼び出しやサイトのDOM構造の外部変更と組み合わせて使用するのに適しています。
特にscrollOverflow:trueを使用している場合などです。
fullpage_api.reBuild();
デモ ページのレスポンシブモードを設定します。
trueに設定すると、autoScrollingがオフになり、responsiveWidthまたはresponsiveHeightオプションが発動したときと同じ結果になります。
fullpage_api.setResponsive(true);
fullpage.jsの拡張機能。fullpage.js >= 3.0.1が必要です。 水平スライドを垂直セクションに変換します。
fullpage_api.responsiveSlides.toSections();
fullpage.jsの拡張機能。fullpage.js >= 3.0.1が必要です。 スライド（垂直セクションに変換されたスライド）を再び水平スライドに戻します。
fullpage_api.responsiveSlides.toSlides();
一部のコールバック（例：onLeave）には、次のプロパティを含むオブジェクト型のパラメータが引数として渡されます。
anchor：(String) アイテムのアンカー。index：(Number) アイテムのインデックス。item：(DOM element) アイテム要素。isFirst：(Boolean) アイテムが最初の子かどうかを決定します。isLast：(Boolean) アイテムが最後の子かどうかを決定します。origin, destination, direction, trigger)デモ セクションが読み込まれ、スクロールが終了した後に発火するコールバック。
パラメータ：
origin：(Object) 移動元(イベント発火元)のセクション。destination：(Object) 移動先(イベント発火後)のセクション。direction：(String) スクロール方向に応じてupまたはdownの値を取ります。trigger：(String) スクロールをトリガーしたアクションを示します。可能な値は："wheel"、"keydown"、"menu"、"slideArrow"、"verticalNav"、"horizontalNav"です。例：
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterLoad: function(origin, destination, direction, trigger){
var origin = this;
//インデックスを使用
if(origin.index == 2){
alert("セクション3の読み込みが終了しました");
}
//アンカーリンクを使用
if(origin.anchor == 'secondSlide'){
alert("セクション2の読み込みが終了しました");
}
}
});
origin, destination, direction, trigger)デモ ユーザーがセクションを離れて新しいセクションに移動するときに発生するコールバック。
戻り値がfalseの場合、移動はキャンセルされます。
パラメータ：
origin：(Object) 移動元(イベント発火元)のセクション。destination：(Object) 移動先(イベント発火後)のセクション。direction：(String) スクロール方向に応じてupまたはdownの値を取ります。trigger：(String) スクロールをトリガーしたものを示します。可能な値は："wheel"、"keydown"、"menu"、"slideArrow"、"verticalNav"、"horizontalNav"です。例：
new fullpage('#fullpage', {
onLeave: function(origin, destination, direction, trigger){
var leavingSection = this;
//セクション2を離れた後
if(origin.index == 1 && direction =='down'){
alert("セクション3に移動します！");
}
else if(origin.index == 1 && direction == 'up'){
alert("セクション1に移動します！");
}
}
});
origin, destination, direction, trigger)デモ セクションを離れる直前、トランジションが行われる前に発生するコールバック。
スクロールが発生する前にキャンセルするには、このコールバックを使用してfalseを返すことで実現できます。
パラメータ：
origin：(Object) 移動元(イベント発火元)のセクション。destination：(Object) 移動先(イベント発火後)のセクション。direction：(String) スクロール方向に応じてupまたはdownの値を取ります。trigger：(String) スクロールをトリガーしたものを示します。可能な値は："wheel"、"keydown"、"menu"、"slideArrow"、"verticalNav"、"horizontalNav"です。例：
var cont = 0;
new fullpage('#fullpage', {
beforeLeave: function(origin, destination, direction, trigger){
// 4回スクロールするまでスクロールを防ぎます
cont++;
return cont === 4;
}
});
デモ ページのDOM構造が生成された直後に発火するコールバック。
このコールバックは、他のプラグインの初期化、DOM構造を必要とするコードを実行するために使用します（このプラグインは結果として構造を作成するためにDOMを変更します）。
詳細はFAQを参照してください。
例：
new fullpage('#fullpage', {
afterRender: function(){
var pluginContainer = this;
alert("DOM構造が生成されました);
}
});
width, height)デモ ブラウザのウィンドウサイズが変更された後、セクションがリサイズされた直後に発火するコールバック。
パラメータ：
width：(Number) ウィンドウの幅。height：(Number) ウィンドウの高さ。例：
new fullpage('#fullpage', {
afterResize: function(width, height){
var fullpageContainer = this;
alert("セクションのリサイズが完了しました");
}
});
デモ fullpage_api.reBuild()を呼び出してfullpage.jsを手動で再構築した後に発火するコールバック。
例：
new fullpage('#fullpage', {
afterReBuild: function(){
console.log("fullPage.js が手動で再構築されました");
}
});
isResponsive)デモ fullpage.jsが通常モードからレスポンシブモードに切り替わった後、またはレスポンシブモードから通常モードに戻った後に発火するコールバック。
パラメータ：
isResponsive：(Boolean) レスポンシブモードに入る場合はtrue、通常モードに戻る場合はfalseを示します。例：
new fullpage('#fullpage', {
afterResponsive: function(isResponsive){
alert("レスポンシブモードか？: " + isResponsive);
}
});
section, origin, destination, direction, trigger)デモ セクションのスライドが読み込まれ、スクロールが終了した後に発火するコールバック。
パラメータ：
section：(Object) アクティブな縦方向のセクション。origin：(Object) 移動元の水平スライド。destination：(Object) 移動後の水平スライド。direction：(String) スクロール方向に応じてrightまたはleftの値を取ります。trigger：(String) スクロールをトリガーしたアクションを示します。可能な値は："wheel"、"keydown"、"menu"、"slideArrow"、"verticalNav"、"horizontalNav"です。例：
new fullpage('#fullpage', {
anchors: ['firstPage', 'secondPage', 'thirdPage', 'fourthPage', 'lastPage'],
afterSlideLoad: function( section, origin, destination, direction, trigger){
var loadedSlide = this;
//セクション2の最初のスライド
if(section.anchor == 'secondPage' && destination.index == 1){
alert("最初のスライドが読み込まれました");
}
//セクション2の2番目のスライド（#secondSlideが2番目のスライドのアンカーであると仮定します）
if(section.index == 1 && destination.anchor == 'secondSlide'){
alert("2番目のスライドが読み込まれました");
}
}
});
section, origin, destination, direction, trigger)デモ ユーザーがスライドを離れて別のスライドに移動する際に発生するコールバック。
戻り値がfalseの場合、移動はキャンセルされます。
パラメータ：
section：(Object) アクティブな縦方向のセクション。origin：(Object) 移動元の水平スライド。destination：(Object) 移動後の水平スライド。direction：(String) スクロール方向に応じてrightまたはleftの値を取ります。trigger：(String) スクロールをトリガーしたものを示します。可能な値は："wheel"、"keydown"、"menu"、"slideArrow"、"verticalNav"、"horizontalNav"です。例：
new fullpage('#fullpage', {
onSlideLeave: function( section, origin, destination, direction, trigger){
var leavingSlide = this;
//セクション2の最初のスライドから右に移動する
if(section.index == 1 && origin.index == 0 && direction == 'right'){
alert("最初のスライドを離れる!");
}
//セクション2の3番目のスライドから左に移動する
if(section.index == 1 && origin.index == 2 && direction == 'left'){
alert("スライド 2 に移動中!");
}
}
});
onSlideLeaveコールバックでfalseを返すことで移動をキャンセルできます。onLeaveでの移動をキャンセル場合と同様の挙動です。
section, slide, position, direction)デモ scrollOverflow: trueオプションを使用している場合に、スクロール可能なセクション内でスクロールすると発火するコールバック。
パラメータ：
section：(Object) アクティブな縦方向のセクション。slide：(Object) 発火元の水平スライド。position：(Integer) セクション/スライド内でのスクロール量。0から始まります。direction：(String) upまたはdown例：
new fullpage('#fullpage', {
onScrollOverflow: function( section, slide, position, direction){
console.log(section);
console.log("位置: " + position);
}
});
fullpage.jsへの貢献をご覧ください。
最近の変更については、リリースセクションを参照してください。
fullpage.jsの配布ファイルをビルドしたい場合は、ビルドタスクをご覧ください。
easingcss3値の定義に便利）スポンサーになって、GitHub の README にあなたのロゴを掲載し、サイトへのリンクを追加しましょう。[お問い合わせ] | [Patreon になる] | GitHub スポンサーになる