なんでもフルスクリーンできるfullPage.jsの使い方徹底検証

fullPage.jsとは
fullPage.jsのライセンスとエラーについて
fullPage.jsの基本的な使い方
背景画像を全画面表示する
動画ファイル（mp4）を全画面表示する
fullPage.jsのオプション
まとめ

fullPage.jsとは

fullPage.jsは全画面のWebサイトページ作成などの必要要素としてブラウザの高さを1ページとし、ページセクションごとにスクロールさせることができます。また、画像や動画も全画面表示できてレスポンシブ対応プラグインです。

fullPage公式サイト

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の対応と少し幅が狭かったので別のプラグインを使用したほうがよいです。

パララックスやりたかったのに有償だった。。

なんでもフルスクリーンできるfullPage.jsの使い方徹底検証

fullPage.jsとは

fullPage.jsのライセンスとエラーについて

fullPage.jsの基本的な使い方

HTML

JS

背景画像を全画面表示する

HTML

css

JS

動画ファイル（mp4）を全画面表示する

HTML

css

JS

fullPage.jsのオプション

まとめ

コメントを残すコメントをキャンセル

Recent Posts

【WebGL】Distortion Hover Effectを使っておしゃれなカフェメニューを作ってみた

現場で普段やってるWebデザインのブラッシュアップポイントまとめました。

【jQuery】multiScroll.jsを使って簡単にコスメの商品ページを作ってみた（全解説）

【three.js】3DWebデザインの参考になるコードスぺニット集

カテゴリー

ブログコンテンツ

ソーシャルメディア

fullPage.jsとは

fullPage.jsのライセンスとエラーについて

fullPage.jsの基本的な使い方

HTML

JS

背景画像を全画面表示する

HTML

css

JS

動画ファイル（mp4）を全画面表示する

HTML

css

JS

fullPage.jsのオプション

まとめ

コメントを残す コメントをキャンセル

Recent Posts

【WebGL】Distortion Hover Effectを使っておしゃれなカフェメニューを作ってみた

現場で普段やってるWebデザインのブラッシュアップポイントまとめました。

【jQuery】multiScroll.jsを使って簡単にコスメの商品ページを作ってみた（全解説）

【three.js】3DWebデザインの参考になるコードスぺニット集

カテゴリー

コメントを残すコメントをキャンセル