- fullPage.jsとは
- fullPage.jsのライセンスとエラーについて
- fullPage.jsの基本的な使い方
- 背景画像を全画面表示する
- 動画ファイル（mp4）を全画面表示する
- fullPage.jsのオプション
- まとめ
fullPage.jsとは
fullPage.jsは全画面のWebサイトページ作成などの必要要素としてブラウザの高さを1ページとし、ページセクションごとにスクロールさせることができます。 また、画像や動画も全画面表示できてレスポンシブ対応プラグインです。
fullPage.jsのライセンスとエラーについて
fullPage.jsの最新バージョン（v3~）はライセンス（licenseKey）が必要となります。
今回は無料で使用するのでライセンスが必要ないバージョン2を使います。
※ 最新バージョンをライセンス無しで使用しているとブラウザのコンソールにエラーが表示されます。
※パララックス（視差）効果は有償のオプションです。
※IE：動画の全画面表示（cover）は対応されていないです。
fullPage.jsの基本的な使い方
PfullPage.jsバージョン2を以下からダウンロードしjquery.fullpage.min.cssとjquery.fullpage.min.jsを読み込みます。
GitHub fullPage.js-2.9.6
<link href="css/jquery.fullpage.min.css" rel="stylesheet" type="text/css">
<script src="js/jquery.fullpage.min.js"></script>HTML
任意のid名（fullpage）内にクラス名sectionを付与された要素がブラウザの高さを取得して全画面1ページとなります。
<div id="fullpage">
<section class="section back01">
<h2 class="tith2_top">fullPage.jsサンプル1</h2>
</section><!-- section -->
<section class="section back02">
<h2 class="tith2_top">fullPage.jsサンプル2</h2>
</section><!-- section -->
</div><!-- fullpage -->またsectionの中にクラス名slideをいれることにより、横スライドの要素になります。
<div id="fullpage">
<section class="section back01">
<div class="slide" id="slide1">
<h2 class="tith2_top">横スライドslide1</h2>
</div><!-- slide -->
<div class="slide" id="slide2">
<h2 class="tith2_top">横スライドslide2</h2>
</div><!-- slide -->
</section><!-- section -->
</div><!-- fullpage -->※クラス名sectionとslideはオプションで変更できます。
JS
jsではid名とオプションの指定ができます。
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
scrollBar: true
});
});
</script>
背景画像を全画面表示する
sectionまたはslide部分にcssで背景画像を設定します。
HTML
<div id="fullpage">
<section class="section back01">
</section><!-- section -->
<section class="section">
<div class="slide back02" id="slide1">
</div><!-- slide -->
<div class="slide back01" id="slide2">
</div><!-- slide -->
</section><!-- section -->
<section class="section back03">
</section><!-- section -->
</div><!-- fullpage -->css
background-size: cover;を設定します。
.back01{
background-image: url(img/coffee-break.jpg);
background-position: center center;
background-size: cover;
}
.back02{
background-image: url(img/long-forest-path.jpg);
background-position: center center;
background-size: cover;
}
.back03{
background-image: url(img/rain-coming-down-window.jpg);
background-position: center center;
background-size: cover;
}JS
jsの設定は特に変えないです。
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
scrollBar: true
});
});
</script>動画ファイル（mp4）を全画面表示する
動画ファイルの全画面表示も基本cssの設定を変えることで実現できます。
HTML
videoタグでmp4をloop（繰り返し）、muted（ミュート）、data-autoplay（自動再生）で設定します。
<div id="fullpage">
<section class="section" id="section0">
<video id="myVideo" loop muted data-autoplay>
<source src="video/video.mp4" type="video/mp4">
</video>
<div class="layer">
<h2 class="tith2_top">fullPage.js videos</h2>
</div>
</section><!-- section -->
</div><!-- fullpage -->css
object-fit: cover; でアスペクト比を保持します。
/* 動画全画面設定 */
#myVideo{
position: absolute;
right: 0;
bottom: 0;
top:0;
right:0;
width: 100%;
height: 100%;
background-size: 100% 100%;
background-color: black; /* in case the video doesn't fit the whole page*/
background-position: center center;
background-size: contain;
object-fit: cover;
z-index:3;
}
/* テキスト部分 */
#section0 .layer {
position: absolute;
z-index: 4;
width: 50%;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}
#section0{
overflow: hidden;
position: relative;
}JS
jsの設定は特に変えないです。
<script>
$(document).ready(function() {
$('#fullpage').fullpage({
navigation: true,
navigationPosition: 'right',
scrollBar: true
});
});
</script>
fullPage.jsのオプション
便利そうなオプションのみ抽出しました。拡張機能は除いています。
| 引数 | 初期値 | 概要 |
|---|---|---|
| menu | false | セクションにリンクするメニューを指定する。data-menuanchor で紐づけする。 |
| anchors | 各セクションのURLに表示されるアンカーリンク（#example）を定義する。 [‘firstPage’, ‘secondPage’] など | |
| navigation | false | trueに設定すると、ナビゲーションバーが表示される。 |
| navigationPosition | none | ナビゲーションの位置。’right’など |
| navigationTooltips | ナビゲーションが使用されている場合にオンマウスで表示するツールチップを定義する。navigationTooltips：[‘firstSlide’、 ‘secondSlide’]など。 | |
| showActiveTooltip | false | trueにすると、ナビゲーションでアクティブに表示されているセクションのツールチップをオンマウス以外でも表示する。 |
| slidesNavigation | false | trueにすると、横スライド用のナビゲーションが表示さる。 |
| slidesNavPosition | ‘bottom’ | スライド用のナビゲーションの位置を設定する。 |
| css3 | true | CSS3変換を使用するかどうかを定義する。 |
| scrollingSpeed | 700 | スクロール遷移のミリ秒単位の速度。 |
| autoScrolling | true | スクロールの際に自動的に隣接のセクションに移動するかどうかの定義。 |
| fitToSection | true | trueにすると、現在アクティブなセクションが常にビューポート全体に表示される。 |
| fitToSectionDelay | 1000 | fitToSectionがtrueに設定されている場合、これは設定されたミリ秒だけフィッティングを遅らせる。 |
| scrollBar | false | trueにすると、スクロールバーを表示する。 |
| easing | ‘easeInOutCubic’ | スクロールに使用するアニメーション効果を定義する。一部のトランジションを使用するには、jquery.easings.min.jsまたはjQueryUIが必要。 |
| easingcss3 | ‘ease’ | css3：trueをにする場合のアニメーション効果を定義する。 |
| loopBottom | false | 最後のセクションまで行ったときに最初のセクションにスクロールするかどうかを定義する。 |
| loopTop | false | 最初のセクションを上にスクロールしたとき最後のセクションにスクロールするかどうかを定義する。 |
| loopHorizontal | true | 水平スライダーがループするかどうかを定義する。 |
| scrollOverflow | false | コンテンツがセクションの高さよりも大きい場合に、セクション専用のスクロールを作成するかどうかを定義しする。scrolloverflow.min.jsの読み込みが必要。 |
| touchSensitivity | 15 | ブラウザウィンドウの幅/高さのパーセンテージ、および次のセクション/スライドに移動するための距離を定義する。 |
| bigSectionsDestination | null | ビューポートよりも大きいサイズのセクションにスクロールする方法を定義する。可能な値はtop、bottom、null。 |
| keyboardScrolling | true | キーボードを使用してコンテンツをナビゲートできるかどうかを定義する。 |
| animateAnchor | true | ハッシュ付きURLアドレスを直打ちしたときなどにアニメーションを使用するかどうか定義する。 |
| recordHistory | true | trueに設定すると、サイトの各セクション/スライドが1つのページとして機能し、ブラウザの戻るボタンと進むボタンがセクション/スライドをスクロールする。 |
| controlArrows | true | スライドのコントロール矢印を使用して右または左に移動するかどうかを決定する。 |
| verticalCentered | true | セクション内のコンテンツの垂直方向の中央揃え。falseにするとトップ揃えになる。 |
| sectionsColor | [‘#ccc’, ‘#fff’] | CSSのbackground-colorプロパティを定義する。 |
| paddingTop | 0 | 各セクションの上部の paddingを定義する。 |
| paddingBottom | 0 | 各セクションの下部のpaddingを数値とそのメジャーで定義する。 |
| fixedElements | null | プラグインのスクロール構造から削除される要素を定義する。’#header, #footer’など |
| responsiveWidth | 0 | ブラウザの幅が設定した数値未満になると、プラグインは通常のサイトのようにスクロールする。 |
| responsiveHeight | 0 | ブラウザの高さが設定した数値未満になると、プラグインは通常のサイトのようにスクロールする。 |
| sectionSelector | ‘.section’ | fullpage.jsのセクションに使用されるjQueryセレクターを定義する。 |
| slideSelector | ‘.slide’ | fullpage.jsのスライドに使用されるjQueryセレクターを定義する。 |
| lazyLoading | true | trueの場合、属性data-srcを含むすべてのメディア要素を遅延読み込みする。 |
| onLeave | function(index, nextIndex, direction){} | ユーザーがセクションからセクションへの移行中に呼び出される関数を定義できる。 |
| afterLoad | function(anchorLink, index){} | スクロールが終了した後、セクションがロードされると、 呼び出される関数を定義できる 。 |
| afterRender | function(){} | ページの構造が読み込まれた直後に呼び出される関数を定義できる。 |
| afterResize | function(){} | 画面リサイズ時に呼び出される関数を定義できる。 |
| afterResponsive | function(isResponsive){} | 通常モードからレスポンシブモードに、またはレスポンシブモードから通常モードに変更された後に呼び出される関数を定義できる。 |
| afterSlideLoad | function(anchorLink, index, slideAnchor, slideIndex){} | スクロールが終了した後、セクションのスライドがロードされると、呼び出される関数を定義できる。 |
| onSlideLeave | function(anchorLink, index, slideIndex, direction, nextSlideIndex){} | ユーザーがスライドを離れて別のスライドに移動すると 呼び出される関数を定義できる。 |
まとめ
全画面ページのwebサイトがとても簡単に作れました。コンテンツ量が少ないwebサイトに向いています。
GitHubではかなり詳しく説明してありましたがオプションでの有償（拡張機能）の線引きが日本語ではなかなかわかりずらいと思いました。
動画の全画面表示はIE以外のMP4の対応と少し幅が狭かったので別のプラグインを使用したほうがよいです。
パララックスやりたかったのに有償だった。。
