1

フルスクリーンでコンテンツをスクロール遷移する「fullPage.js」

フルスクリーンでコンテンツをスクロール遷移する「fullPage.js」

フルスクリーン画面でスクロールによるコンテンツ遷移と併せて、横にスライドする形式を実装できる「fullPage.js」をご紹介します。

 

まずは、サンプルをご確認ください。

DEMO

 

それでは見ていきましょう。

 

1.ファイル一式をダウンロード

「fullPage.js」のサイトにアクセスしてファイル一式をダウンロードします。

fullPage.js

fullPage.js: Create Beautiful Fullscreen Scrolling Websites

 

ダウンロードファイルの中には、下図のようなファイルが入っています。

fullpage-img2

その中で、実際に利用するのは以下の4つになります。

  • jquery.fullPage.css
  • jquery.easings.min.js
  • jquery.slimscroll.min.js
  • jquery.fullPage.js

 

2.jQuery本体とファイルを読み込む

JavaScriptは「jsフォルダ」内に、cssは「cssフォルダ」内に格納しました。違う場所から読み込む場合は、適宜書き換えてください。

 

3.HTMLを記述

 fullpage-html

全体を「#fullpage」で囲い、縦方向に必要なコンテンツ部分を「.section」、横方向へのコンテンツ部分を「.slide」で囲います。

 

4.CSSを記述

 

5.JavaScriptを記述

 

いくつかのオプション設定が可能です。調整しながらカスタマイズして使っていけますね。

 

6.オプションを確認

resize: true

⇒ウィンドウサイズががリサイズされるとき、テキストもリサイズするかどうか

 

sectionsColor: [‘#c1e589’, ‘#e7d5a6’, ‘#89cee5’, ‘#958f9c’, ‘#000’]

⇒section背景色

 

scrollingSpeed: 500

⇒スクロール速度(デフォルト700mm/s)

 

navigation: false

⇒縦方向へのスライド用ナビゲーション表示・非表示

 

navigationPosition: ‘right’

⇒縦方向へのスライド用ナビゲーション位置

 

slidesNavigation: true

⇒横方向へのスライド用ナビゲーション表示・非表示

 

slidesNavPosition: ‘bottom’

⇒横方向へのスライド用ナビゲーション位置

 

loopBottom: false

⇒一番下までスクロールしたあと一番上まで戻るかどうか

 

loopTop: false

⇒一番下までスクロールしたあと一番上まで戻るかどうか

 

sectionSelector: ‘.section’

⇒縦方向に必要なコンテンツ部分につける名前の指定(サンプルは「.section」)

 

slideSelector: ‘.slide’

⇒横方向に必要なコンテンツ部分につける名前の指定(サンプルは「.slide」)

 

この他にも、細かい設定は可能ですので調整してみてください。


 

One Comment

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

mororeco > jQuery > フルスクリーンでコンテンツをスクロール遷移する「fullPage.js」