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

iPhone, iPadなどでアイコンのタッチを促すようにプルプルと振動させるjQueryのプラグインを紹介します。

デモのキャプチャ

Wiggle -GitHub

Wiggleのデモ

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

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

デモのキャプチャ

デモページ

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>

対応ブラウザ

対応ブラウザはCSS3アニメーションをサポートするFirefox, Chrome, Safari, Operaです。IEなど非サポートブラウザに対応させるにはSandpaperと併用するとよいでしょう。

top of page

©2017 coliss