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

表示されているページを左右にドラッグ(フリック)して、アニメーションで左右にコンテンツをスライド表示するデスクトップにもスマフォにも対応したスクリプトを紹介します。
jQueryなどの他のライブラリには依存しません。

サイトのキャプチャ

Snap.js -GitHub

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
}

top of page

©2017 coliss