fullPage.jsは、フルスクリーンでコンテンツを表示し、画面ごとにスクロールさせることができるjQueryプラグインです。
どういったページが実装できるのかについては、デモを見てもらうのが一番わかりやすいと思います。以下公式サイトより挙動をご確認ください。
fullPage.jsの使い方
ステップ1. ファイルのダウンロードと設定
まずはGitHubからファイル一式をダウンロードします。以下のファイルをサーバーにアップロードしましょう。
- dist/fullpage.min.css
- dist/fullpage.min.js
- vendors/easings.min.js
- vendors/scrolloverflow.min.js
後述しますが、easings.min.jsとscrolloverflow.min.jsは、オプションを変更しないのであれば必要ありません。easings.min.jsはCSS3のeasingを使わない場合に必要で、scrolloverflow.min.jsはscrollOverflowを有効にした場合に必要なファイルです。
ファイルをアップしたら、jQuery本体とそれぞれのファイルを読み込みます。
<link rel="stylesheet" href="css/fullpage.min.css"> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="js/easings.min.js"></script> <script src="js/scrolloverflow.min.js"></script> <script src="js/fullpage.min.js"></script>
上記を<head>～</head>内に記述します。スクリプトは</body>の直前でもOKです。
ファイルをCDNから呼び出したい時は、こちらからアドレスをコピーして読み込みます。
ステップ2. HTMLのマークアップ
HTMLは以下のように#fullpageで全体を内包し、各スクリーンを.sectionでセクション分けします。
<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>
横スライドするセクションを実装したい場合は、.sectionの中に.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>
ステップ3. fullPage.jsの実行
最後に、fullPage.jsを実行します。
<script>
$(function(){
$('#fullpage').fullpage();
});
</script>
最低限必要なのはここまでです。
fullPage.jsのオプション
fullPage.jsには、豊富なオプションが用意されています。オプションを指定する場合は、以下のように指定してあげます。
<script>
$(function(){
$('#fullpage').fullpage({
//Navigation
menu: '#menu', //メニューのID
lockAnchors: false, //メニューのアンカー有効化
anchors:['firstPage', 'secondPage'], //メニューのアンカー先
navigation: false, //スクロール位置のナビゲーション
navigationPosition: 'right', //スクロールナビゲーションの位置
navigationTooltips: ['firstSlide', 'secondSlide'], //スクロールナビゲーションのツールチップ
showActiveTooltip: false, //スクロールナビゲーションのツールチップ表示有無
slidesNavigation: false, //スライドのナビゲーション表示
slidesNavPosition: 'bottom', //スライドナビゲーションの位置
//Scrolling
css3: true, //CSS3のeasingを使用。falseでJavaScript使用
scrollingSpeed: 700, //スクロールのスピード
autoScrolling: true, //スクロールした際に自動で次の要素を表示
fitToSection: true, //要素を自動で画面に合わせて調整
fitToSectionDelay: 1000, //自動で画面に合わせる際のスピード
scrollBar: false, //ブラウザのスクロールバーの表示
easing: 'easeInOutCubic', //スクロールアニメーションの種類
easingcss3: 'ease', //CSS3を使ったスクロールアニメーションの種類
loopBottom: false, //一番下のコンテンツより下にスクロールしたら最初にループ
loopTop: false, //一番上のコンテンツより上にスクロールしたら最後にループ
loopHorizontal: true, //スライドのループ
continuousVertical: false, //一番上もしくは一番下のコンテンツからさらにスクロールするとループ。loopBottom・loopTopとの併用不可
continuousHorizontal: false, //スライドのループ
scrollHorizontally: false, //水平スクロール
interlockedSlides: false,
dragAndMove: false, //ドラッグによる移動
offsetSections: false,
resetSliders: false,
fadingEffect: false, //フェードエフェクト
normalScrollElements: '#element1, .element2', //自動スクロールを無効化したい要素
scrollOverflow: false, //コンテンツが画面より大きい時にスクロールして表示
scrollOverflowReset: false,
scrollOverflowOptions: null,
touchSensitivity: 15, //タッチデバイスでのスワイプ感度
normalScrollElementTouchThreshold: 5,
bigSectionsDestination: null,
//Accessibility
keyboardScrolling: true, //キーボードによるスクロールの操作
animateAnchor: true, //ページ内リンクのアニメーション有無
recordHistory: true, //スクロールの履歴をブラウザに記録
//Design
controlArrows: true, //スライドの矢印表示
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'}, //パララックス効果のオプション
//Custom selectors
sectionSelector: '.section', //セクションのクラス名
slideSelector: '.slide', //スライドのクラス名
lazyLoading: true, //遅延ロード
//events
onLeave: function(origin, destination, direction){}, //スクロール開始時に呼び出される関数
afterLoad: function(origin, destination, direction){}, //スクロール完了時に呼び出される関数
afterRender: function(){}, //ぺージ読み込み時に呼び出される関数
afterResize: function(){width, height}, //ウインドウサイズのリサイズ時に呼び出される関数
afterResponsive: function(isResponsive){}, //responsiveWidth・responsiveHeightの条件を満たした時に呼び出される関数
afterSlideLoad: function(section, origin, destination, direction){}, //スライド開始時に呼び出される関数
onSlideLeave: function(section, origin, destination, direction){} //スライド完了時に呼び出される関数
});
});
</script>
上記オプションで指定されている値は初期値です。
あとがき
セクションごとにスクロールする効果を実装したい時は、サクッと作れて便利ですね。オプションも豊富で様々なデザインや効果に対応できそうです。
とはいえ、この手のサイトは最近ではあまり見かけなくなってきましたね(^^; もしfullPage.jsを導入する案件が出てきた際には、ぜひ参考にしていただければと思います。