[JS]操作感が楽しい！左右にドラッグ・フリックしてコンテンツを表示するスクリプト -Snap.js

サイト構築 -JavaScript

Post on:2013年5月7日

Snap.jsの特徴

jQueryなどの他のライブラリへの依存は無し
CSS3を使った強力なアニメーション
スライドは右・左に対応
ドラッグ操作のサポート
ドラッグ操作禁止要素も定義可能
スマフォのフリック操作のサポート
フックイベントのサポート
イベントの有効・無効の設定
カスタマイズが簡単

対応ブラウザ

IE10を含む全てのモダンブラウザに対応しています。
IE7/8/9はCSS3での一部の機能が制限されます。

Firefox 10+
Chrome, SafariなどのWebkit系ブラウザ（Android WebKit 2.3.xも）
IE10
IE9
※ドラッグとトグルはサポート、アニメーションは無し
IE7/8
※トグルはサポート、ドラッグとアニメーションは無し

Snap.jsのデモ

デモはIE10を含む、モダンブラウザでご覧ください。

デモページ

スライドのトリガーとなるのは、左上のトグルボタンのクリック操作とドラッグ（フリック）操作の2種類です。
トグルをクリック、右にドラッグ（フリック）すると、左にサイドバーが表示されます。

デモページ：Default

また、左にドラッグ（フリック）すると、右にサイドバーが表示されます。

デモページ：Default

ここまでは、デフォルトのデモです。
次にオプションで設定を変更したデモを見てみましょう。ドラッグはページ全体に有効ですが、禁止要素を設定することもできます。真ん中の赤い要素でドラッグしてもページはスライドしません。

デモページ：No Drag

表示するスライドは左右の2種類が可能ですが、片方だけにすることもできます。デモは右のスライドをオフにしたものです。

デモページ：Right Disabled

続いてのデモはSkinny Thresholdで、スライドするスペースの幅を設定します。
思いっきりドラッグしてみます。

デモページ：Skinny Threshold

ドラッグしたスペースは、指定された幅に自動で戻ります。

デモページ：Skinny Threshold

Snap.jsの使い方

Step 1: 外部ファイル

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

<script src="snap.js"></script>

Step 2: HTML

HTMLは通常通りで、スライドさせる要素を指定できるようにしておきます。

Step 3: JavaScript

スライドさせる要素（content）を指定し、スクリプトを実行します。

var snapper = new Snap({
  element: document.getElementById('content')
});

スクリプトのオプション

オプションではデモにあるような設定をはじめ、アニメーションのタイミングなどエフェクトを変更できます。

settings = {
    element: null,
    disable: 'none',
    addBodyClasses: true,
    resistance: 0.5,
    flickThreshold: 50,
    transitionSpeed: 0.3,
    easing: 'ease',
    maxPosition: 266,
    minPosition: -266,
    tapToClose: true,
    touchToDrag: true,
    slideIntent: 40,
    minDragDistance: 5
}