[JS]スマートフォンでタッチを促すようにプルプルと振動させるスクリプト -Wiggle

サイト構築 -JavaScript

Post on:2012年6月4日

Wiggleのデモ

デモはiPhone, iPadで動作しますが、デスクトップ用のFirefox, Chrome, Safari, Operaでも動作します。

各画像はタッチ（クリック）するとプルプル振動し、下のボタン「Start All」で全部プルプル、「Random Cycle」でランダムにプルプルします。

デモページ

[ad#ad-2]

Wiggleの使い方

外部ファイル

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

<script src="http://code.jquery.com/jquery-1.6.min.js"></script>
<script src="wiggle.jquery.js"></script>

HTML

HTMLはシンプルで、デモではimg要素を並べているだけです。

<div id="iconWrapper">
	<img src="icons/Calculator.png" alt="Calculator"/>
	<img src="icons/Calendar.png" alt="Calendar"/>
	<img src="icons/Camera.png" alt="Camera"/>
	...
</div>

JavaScript

jQueryのセレクタで適用する箇所を指定し、スクリプトを実行します。

<script>
$(function() {
	$('img').wiggle('start');
});
</script>

スクリプトのオプション

オプションではプルプルの具合やランダムの設定、コールバックなどが利用できます。

wiggleDegrees: 揺れの範囲（ピクセル）
delay: ローテーション時の遅延のタイミング
limit: 揺れの際打数
randomStart: ランダムの有無
onWiggle: 揺れ時のイベント
onWiggleStart: 揺れ開始時のイベント
onWiggleStop: 揺れ終了時のイベント

オプションを使用すると、下記のようになります。

<script>
$(function() {
    $('img').wiggle('start', {
    wiggleDegrees: ['1','2','1','0','-1','-2','-1','0'],
    delay: 35,
    limit: 5,
    randomStart: false,
    onWiggle: function(object) {
        // code goes here
    },
    onWiggleStart: function(object) {
        // code goes here
    },
    onWiggleStop: function(object) {
        // code goes here
    }
});
});
</script>