スライドショーみたいに1ページずつスクロールするウェブサイトをつくる

スライドショーみたいに1ページずつスクロールするウェブサイトをつくりたく、いろいろ調べた結果、One Page ScrollというjQueryのプラグインを使うことにした。
いまならfullPage.jsだろ？というツッコミを受けそうだけど、そこまで多機能でなくて良いし、なにより軽量でシンプルなほうが良いという人にオススメだ。

One Page ScrollとfullPage.js

One Page Scrollは、iPhone5sのようなウェブサイトをつくるために開発されたjQueryプラグインだ。iPhone5sという時点で時代を感じる。
そしてより多機能に、より使いやすくしたのがfullPage.js。

ただ、「スライドショーみたいなウェブサイトがつくりたい」という目的を果たすためだけなら、OnePageScrollで十分だろう。

jquery.fullPage.min.jsが29.6KBに対し、jqeury.onepage-scroll.min.jsは9.15KB。
3分の1のサイズなので、ロードもそれほど気にならない。

1ページずるスクロールさせる

今回は、下図のようなウェブサイトをつくる。
※ jsFiddleでサンプルを作ったので、横スクロールになっているが、縦スクロールでもOK

<!-- index.html -->
<div class="main">
  <section class="section page1"><h2>吾輩は猫である。</h2></section>
  <section class="section page2"><h2>名前はまだない。</h2></section>
  <section class="section page3"><h2>どこで生まれたか</h2></section>
  <section class="section page4"><h2>とんと見当がつかぬ。</h2></section>
</div>

// script.js
$('.main').onepage_scroll({
  sectionContainer: 'section',
  easing: 'ease',
  animationTime: 500,
  
  pagination: false,
  direction: "horizontal"
});

※ CSSについては省略（詳しくはjsFiddleを参照）

まず原則として、ページの1階層上にコンテナ（ラッパー）要素が必要だ。
今回は、section要素がそれぞれのページにあたるので、div.mainで囲んでいる。

onepage_scrollのパラメータは以下のとおり。
記載している値はデフォルト値なので、必要に応じてパラメータに渡す。

• sectionContainer: "section"
• ページにあたる部分のセレクターを指定する
• デフォルトでは、sectionタグがページの単位になる
• ".page"でも"ul > li"でも問題ない
• easing: "ease"
• イージング（アニメーションのタイプ）を指定する
• ease、linear、ease-in、ease-out、ease-in-out、cubic-bezier()
• animationTime: 1000
• アニメーションにかかる時間をms単位で指定する
• pagination: true
• paginationを表示したくない場合はfalse
• 自動でスタイルはあたらないので、自分でCSSを書く
• updateURL: false
• スクロールしたとき（ページが変わったとき）にURLを更新するかどうか
• http://example.com/#1, #2, #3のようにURLが更新される
• beforeMove: function (index) {}
• ページが切り替わる直前に行いたいイベント
• afterMove: function (index) {}
• ページが切り替わった直後に行いたいイベント
• loop: true
• 最初/最後のページでスクロールしたときに、ループさせるかどうか
• keyboard: true
• キーボードによる操作を可能にするかどうか
• ↑/↓、Page Up/Page Down、Home/End、Space
• responsiveFallback: false
• ブラウザ幅が指定された値未満になると、1ページずつのスクロールをやめる
• responsiveFallback:600 だとブラウザ幅が600px未満なら1ページずつスクロールさせない
• direction: "vertical"
• ページが切り替わる方向
• vertical、horizontal

これらのパラメータ以外にも、いくつかメソッドが公開されている。

• $.fn.moveUP()
• $('.main').moveUp()で1ページもどる
• $.fn.moveDown()
• $('.main').moveDown()で1ページすすむ
• $.fn.moveTo(pageIndex)
• $('.main').moveTo(3)で3ページにすすむ

以上

written by @bc_rikko