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

ページ上に配置したボタンやdiv要素やフォームのフィールドなどをユーザーのマウスホバーでぷるぷる振動させるjQueryのプラグインを紹介します。

サイトのキャプチャ

jQuery Vibrate

jQuery Vibrateのデモ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

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名です。

top of page

©2017 coliss