フルスクリーンサイトを簡単に実現するjQueryプラグイン「fullPage.js」

こんにちは、つみきのフロントエンドエンジニアの佐藤です。

今回は、とても簡単な記述だけで、フルスクリーンスクロールのサイトを実現できる「fullPage.js」というライブラリをご紹介したいと思います。

https://github.com/alvarotrigo/fullPage.js/

※ 当記事執筆時のバージョンは 2.5.2 です。


リリース当初少し話題になり、その後、開発が滞っていたようですが、ここ最近また活発にアップデートされているようです。
README.md には活用事例が多数掲載されていて、実績も確認できます。

https://github.com/alvarotrigo/fullPage.js/#who-is-using-fullpagejs

fullPage.jsの特徴・メリット

このプラグインの特徴・メリットとしては以下が挙げられます。

  • フルスクリーンのサイズ調整、リサイズ判定が簡単
  • スクロールイベント実装も簡単
  • jQuery や JavaScript が苦手でも簡単に実装できる
  • IE8 までサポート対象とされている
  • 指定できるオプションが豊富でカスタマイズ性が高く、応用がしやすい

サンプル

サンプルを用意しました。

http://sugarshin.github.io/fullpagejs-demo/

このようなページが簡単な記述だけで実現できます。

使い方

使い方はとても簡単です。

jQuery に依存しているので、 jQuery と用意された CSS, JavaScript ファイルを読み込みます。

<link rel="stylesheet" href="jquery.fullPage.css">
<script src="jquery.js"></script>
<script src="jquery.fullPage.js"></script>

そして HTML には以下のように要素を用意します。

<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>

あとは、 JavaScript で以下のようにするだけです。

$('#fullpage').fullpage();

オプション

オプションをいくつか指定可能で、カスタマイズできます。初期値は以下のようになっています。

$('#fullpage').fullpage({
  // ナビゲーション関連
  menu: false,
  anchors:['firstSlide', 'secondSlide'],
  navigation: false,
  navigationPosition: 'right',
  navigationTooltips: ['firstSlide', 'secondSlide'],
  slidesNavigation: true,
  slidesNavPosition: 'bottom',

  // スクロール関連
  css3: true,
  scrollingSpeed: 700,
  autoScrolling: true,
  scrollBar: false,
  easing: 'easeInQuart',
  easingcss3: 'ease',
  loopBottom: false,
  loopTop: false,
  loopHorizontal: true,
  continuousVertical: false,
  normalScrollElements: '#element1, .element2',
  scrollOverflow: false,
  touchSensitivity: 15,
  normalScrollElementTouchThreshold: 5,

  // アクセシビリティ
  keyboardScrolling: true,
  animateAnchor: true,

  // デザイン
  controlArrows: true,
  verticalCentered: true,
  resize : true,
  sectionsColor : ['#ccc', '#fff'],
  paddingTop: '3em',
  paddingBottom: '10px',
  fixedElements: '#header, .footer',
  responsive: 0,

  // カスタムセレクタ
  sectionSelector: '.section',
  slideSelector: '.slide',

  // 各種イベント
  onLeave: function(index, nextIndex, direction){},
  afterLoad: function(anchorLink, index){},
  afterRender: function(){},
  afterResize: function(){},
  afterSlideLoad: function(anchorLink, index, slideAnchor, slideIndex){},
  onSlideLeave: function(anchorLink, index, slideIndex, direction){}
});

スクロールのスタートやストップのイベントが取れるので、現在のセクションに合わせた処理がわりと書きやすいかと思います。

まとめ

類似のライブラリをいくつか試しましたが、こちらが一番取れるオプションも豊富で、動作も安定しているかと思います。

ちなみに、ドネーションウェアですので気に入ったら寄付をしましょう。

今回は以上になります。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ