要素をスムーズにドラッグさせられるjQueryプラグイン「jquery.pep.js」

要素をスムーズにドラッグさせられるjQueryプラグイン「jquery.pep.js」サンプル 画像などの要素をドラッグさせるようなインタラクティブな表現がスマホ時代には求められそうです。
Pep - kinetic drag on mobile & desktopはこれを簡単に実現できるjQueryプラグインです。

使用方法 briangonzalez/pep.jquery.js - GitHubからファイルをダウンロード。
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<script type="text/javascript" src="jquery.pep.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#id名').pep();
});
</script>

あとは上記idを動かしたい要素に振れば完成です。
<img src="画像パス" id="id名" />
オプションには下記のようなものがあります。
//アクティブ時のクラス
activeClass: 'active'

// スピード
multiplier: 1,

// 動きの設定: http://matthewlein.com/ceaser/
cssEaseString: "cubic-bezier(0.210, 1, 0.220, 1.000)"

//動く軸を固定 x または y
axis: 'x'

sponsors

「要素をスムーズにドラッグさせられるjQueryプラグイン「jquery.pep.js」」をシェアする

記事作成:
記事URL:

TOP > > 要素をスムーズにドラッグさせられるjQueryプラグイン「jquery.pep.js」