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

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

サイトのキャプチャ

jQuery.panelSnap
jQuery.panelSnap -GitHub

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);

top of page

©2017 coliss