[JS]ページ上のさまざまな要素をぷるぷる振動させるスクリプト -jQuery Vibrate

サイト構築 -JavaScript

Post on:2011年10月31日

jQuery Vibrateのデモ

デモではぷるぷるの振動だけでなく、CSSのプロパティを変更することもできます。

デモ：ベーシック
ボタンにマウスホバーするとぷるぷる振動します。

デモ：逆バージョン
通常ぷるぷる振動しており、マウスホバーで止まります。

デモ：スピードの調整
ブルブルの振動はスピードを調整できます。

デモ：ボタン以外の要素
div要素やフォームのフィールドもぷるぷる振動させることができます。

デモ：更なるエフェクト
CSSの各プロパティを変更することもできます。

[ad#ad-2]

jQuery Vibrateの実装

JavaScript

jQuery Vibrateはさまざまなオプションを簡単に設定できます。

$('.vibrate').vibrate({
   speed: 50,             // Vibration speed in milliseconds
   trigger: "mouseover",  // Triggering event
   reverse: false,        // Reverse behaviour
   overEffect: "stop",    // Over effect, see details below
   vibrateClass: "",      // CSS class applied when vibrating (New in vers. 1.1!)
   overClass: "",         // CSS class applied when over effect is triggered (New in vers. 1.1!)
})

speed: ぷるぷる振動するスピードです。; デフォルトは50ms。
trigger: ぷるぷる振動させるイベントのトリガーです。; デフォルトはマウスオーバー(mouseover)で、フォーカス(focus)に変更可能です。
reverse: 通常ぷるぷるかマウスオーバー後にブルブルするかです。; デフォルトはfalseで、オーバー後ブルブルです。
overEffect: reverseがfalse時のみ使うパラメータです。; デフォルトはstopです。
vibrateClass: 要素のぷるぷる振動時に付与するclass名です。
overClass: 要素のオーバー時に付与するclass名です。