2017/04/14

スライドショーみたいに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

<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>
$('.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

0 件のコメント :

コメントを投稿