[JS]複数のパネルを1ページに垂直に配置した際にベストポジションにスクロールを補正するスクリプト -jQuery.panelSnap

サイト構築 -JavaScript

Post on:2013年7月18日

sponsorsr

1ページに複数のパネルを垂直に配置した際、スクロールして次のパネルを表示する時にずれたポジションでスクロールをやめても、ベストなポジションに自動でスナップさせるjQueryのプラグインを紹介します。

jQuery.panelSnap
jQuery.panelSnap -GitHub

jQuery.panelSnapのデモ
jQuery.panelSnapの使い方

jQuery.panelSnapのデモ

デモはjQuery.panelSnapのページを下にスクロールすると、表示されます。

jQuery.panelSnap

デモの紹介の前に、このページ自体もpanelSnapが実装されており、スクロールして下のコンテンツを表示する際、中途半端なポジションでストップすると、ちょうどいいポジションにスナップします。

こんな感じに、スクロールを中途半端なポジションでやめてみます。

中途半端なポジション

すぐに、自動で次のコンテンツがちょうどよく表示されるポジションにスクロールします。

ベストポジションに自動補正

以下は、スクリプトのいろいろな機能のデモです。

Connected Menu
左のメニューと連動しているデモです。

Callback Functions
各パネルごとにスナップのスタートとフィニッシュにコールバックが用意されています。

Event Capturing
各イベントを取得することもできます。

jQuery.panelSnapの使い方

Step 1: 外部ファイル

スクリプトをhead内に外部ファイルとして記述します。

<head>
  ...
  <script src="/path/to/jquery.js"></script>
  <script src="/path/to/jquery.customEvents.js"></script>
  <script src="/path/to/jquery.panelSnap.js"></script>
</head>

Step 2: HTML

コンテンツは一つずつsection要素（変更可能）で並列に配置します。
スタイルシートは各コンテンツ自由にしてください。

<body>
  <section>コンテンツ：1</section>
  <section>コンテンツ：2</section>
  <section>コンテンツ：3</section>
</body>

Step 3: JavaScript

パネルを内包する要素をjQueryのセレクタで指定しスクリプトを実行するだけで、パネルがスナップするようになります。

<script>
  $('body').panelSnap();
</script>

オプション

オプションでは、スナップする際のスピードやパネルのセレクタを設定できます。下記の値は全てデフォルトのものです。

var options = {
  $menu: false,
  menuSelector: 'a',
  panelSelector: 'section',
  namespace: '.panelSnap',
  onSnapStart: function(){},
  onSnapFinish: function(){},
  directionThreshold: 50,
  slideSpeed: 200
};

$('.panel_container').panelSnap(options);