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

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

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