フルスクリーン表示の画面ごとにスクロールするページを作成できるjQueryプラグイン「fullPage.js」

フルスクリーン表示の画面ごとにスクロールするページを作成できるjQueryプラグイン「fullPage.js」

フルスクリーン表示の画面ごとにスクロールするページを作成できるjQueryプラグイン「fullPage.js」
  • シェアしてね♪
  • このエントリーをはてなブックマークに追加
  • follow us in feedly


  • 一式98,000円~の格安プランをご用意!Web制作お任せください!
  • このエントリーをはてなブックマークに追加
  • follow us in feedly

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を導入する案件が出てきた際には、ぜひ参考にしていただければと思います。

この記事が気に入ったら
いいね!してね♪

Twitter で
スポンサードリンク

関連記事

コメントを残す

メールアドレスが公開されることはありません。