要素を小刻みに振動（wiggle）させる jqueryプラグイン3選-その1「jQuery Vibrate」

2016/12/25 Jquery

【この記事を読むのに必要な時間は約 18 分です。】

今回から3回にわたり画像などの要素を小刻みに振動（Wiggle）させるjqueryプラグインを紹介する。「jQuery Vibrate」、「ClassyWiggle」（旧「jQuery Wiggle plugin」）、「jRumble」の3つ。まずは、「jQuery Vibrate」を紹介する。
このところ「toggle」「wiggle」「QRcode」と小技的なjqueryプラグインを紹介するために数多くの記事を見てきたが、理解して自分の望むように動かすまでにプログラムがわかってる人にはおそらく何でもないことで結構つまずいた。私のようにわからない人が理解し利用しやすい記事にするよう心がけたいと思う。

スポンサーリンク
レクタングル（大）広告




jQuery Vibrateのダウンロードとサーバーへのアップロード

注意事項

要素を振動（wiggle）させるプラグインは名前も似たようなものが非常に多い。似た名前の違うプラグインだと動作のさせ方が違ったりするので注意して欲しい。

ホームページ

こちらがjQuery Vibrateのホームページ。左側の「Download now」のフォルダ画像をクリックするとダウンロードできる。
ダウンロードファイル：jquery.vibrate.zip
必要ファイルは解凍したフォルダの中にあるjquery.vibrate.min.jsファイルだけなので、これをサーバーにアップロードする。
必要ファイル：jquery.vibrate.min.js

1vibrate

設定方法とデモ

jQuery Vibrateの基本動作とオプション

デフォルトの$('要素').vibrate()でマウスオーバーで振動を始め、マウスアウトで振動を止める。
オプションとして、トリガーに「mouseover」のほかに「focus」（通常、要素がマウスオーバーやクリックなどで、フォーカスされた場合動作を開始する）が用意されている。その他振動速度、最初から振動、マウスオーバーで要素のクラスを変える等が用意されている。

jQuery本体とjsファイルの呼び出しの設定

jQuery本体とjquery.qrcodeのjsファイルを呼び出す設定をする。
ヘッダー部分（<head>と</head>の間）に以下のように記載する。なお、jQuery本体はGoogle AJX APIのホスティングを利用している。

<!-- jquery本体 -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<!-- /jquery本体 -->

<!-- jqueryVvibrate -->
<script type="text/javascript" src="http://（アップロード先URLを記載）/jquery.vibrate.min.js"></script>
<!-- /jqueryVibrate -->

動作設定のためのjsの設定

上記に続けて、ヘッダー部分（<head>と</head>の間）に以下のように記載する。

<!-- setting -->
<script type="text/javascript">
$(document).ready(function(){
       $('#vib1').vibrate()      //デモ１　デフォルト
       $('#vib2left').vibrate({  //デモ２　左
          speed: 10,             // 振動速度10m秒
          trigger: "mouseover",  // マウスオーバーで振動を始める
          reverse: false,        // 最初は停止しているr
          overeffect: stop,      // reverseがtrueの時に有効（デフォルトはストップ）
          vibrateClass: "",      // 振動しているときのcssのクラスを指定
          overClass: "",         // 振動が終わったときのcssのクラスを指定
       })
       $('#vib2right').vibrate({ //デモ２　右
          speed: 50,             // 振動速度50m秒
          trigger: "mouseover",  // マウスオーバーで振動を止める
          reverse: true,         // 最初は振動している
          overeffect:"",         // reverseがtrueの時に有効（デフォルトはストップ）
          vibrateClass: "",      // 振動しているときのcssのクラスを指定
          overClass: "",         // 振動が終わったときのcssのクラスを指定
       })
       $('#vib3left').vibrate({  //デモ　３左
          speed: 50,             // 振動速度50m秒
          trigger: "mouseover",  // マウスオーバーで振動を始める
          reverse: false,        // 最初は停止しているr
          overeffect: stop,      // reverseがtrueの時に有効（デフォルトはストップ）
          vibrateClass: "",      // 振動しているときのcssのクラスを指定
          overClass: "",         // 振動が終わったときのcssのクラスを指定
       })
       $('#vib3right').vibrate({ //デモ　３右
          speed: 10,             // 振動速度10m秒
          trigger: "mouseover",  // マウスオーバーで振動を止める
          reverse: true,         // 最初は振動している
          overeffect:"",         // reverseがtrueの時に有効（デフォルトはストップ）
          vibrateClass: "",      // 振動しているときのcssのクラスを指定
          overClass: "",         // 振動が終わったときのcssのクラスを指定
       })
       $('.demo-box-left').vibrate({       //デモ４　左
          speed: 50,                       // 振動速度50m秒
          trigger: "mouseover",            // マウスオーバーで振動を止める
          reverse: false,                  // 最初は停止している
          overeffect:"",                   // reverseがtrueの時に有効（デフォルトはストップ）
          vibrateClass: "demo-box-change", // 振動しているときのcssのクラスを指定
          overClass: "",                   // 振動が終わったときのcssのクラスを指定
       })
       $('.demo-box-right').vibrate({      //デモ４　右
          speed: 10,                       // 振動速度10m秒
          trigger: "mouseover",            // マウスオーバーで振動を止める
          reverse: true,                   // 最初は振動している
          overeffect:"",                   // reverseがtrueの時に有効（デフォルトはストップ）
          vibrateClass: "",                // 振動しているときのcssのクラスを指定
          overClass: "demo-box-change",    // 振動が終わったときのcssのクラスを指定
       })
});
</script>
<!-- /setting -->

上のように説明をつけて、複数行にわたってscriptを記載するとchromeやfirefoxでは特に問題ないのに何故かIEで動作しなかった。念のため、デフォルトを省略し、かつ、１行にまとめたものを記載しておく。これだとIEでも問題なく動作する。
このあたりの理由はプログラム知らないのでほんとわかりません＞＜

<!-- setting -->
<script type="text/javascript">
$(document).ready(function(){
       $('#vib1').vibrate()
       $('#vib2left').vibrate({ speed: 10 })
       $('#vib2right').vibrate({ speed: 50, reverse: true, })
       $('#vib3left').vibrate({ speed: 50, })
       $('#vib3right').vibrate({ speed: 10, reverse: true, })
       $('.demo-box-left').vibrate({ speed: 50, vibrateClass: "demo-box-change", })
       $('.demo-box-right').vibrate({ speed: 10, reverse: true, overClass: "demo-box-change", })
});
</script>
<!-- /setting -->

なお、デモ全ての動作を記載している。ひとつのデモだけの場合は、次のように切り取って記載する。例として上のハイライトした「デモ２左」だけにする場合。

<!-- setting -->
<script type="text/javascript">
$(document).ready(function(){
       $('#vib2left').vibrate({  //デモ２　左
          speed: 10,             // 振動速度10m秒
          trigger: "mouseover",  // マウスオーバーで振動を始める
          reverse: false,        // 最初は停止しているr
          overeffect: stop,      // reverseがtrueの時に有効（デフォルトはストップ）
          vibrateClass: "",      // 振動しているときのcssのクラスを指定
          overClass: "",         // 振動が終わったときのcssのクラスを指定
       })
});
</script>
<!-- /setting -->

IEも考慮してデフォルトを省略すると実はこれだけ。

<!-- setting -->
<script type="text/javascript">
$(document).ready(function(){
       $('#vib2left').vibrate({ speed: 10 })
});
</script>
<!-- /setting -->

デモ用cssの設定

divボックスを用意してデモを表示しているので、参考のために示す。
ヘッダー部分（<head>と</head>の間）に以下のように記載する。

<!-- css for js -->
<style type="text/css">
.demo-box {
    float:left;                    /*boxを左寄せ*/   
	width: 100px;                  /*boxの幅*/
	height: 100px;                 /*boxの高さ*/
	margin: 20px;                  /*boxの外回り余裕*/
	background: #ff3366;           /*boxの背景色（赤系セーフカラー）*/
	color: #ffffff;                /*文字色*/
	font-size: 24px;               /*文字サイズ*/
	font-weight: bold;             /*太字*/
	line-height: 100px;            /*文字の高さ*/
	text-align: center;            /*文字の横位置中央*/
	text-shadow: -2px 2px 0px rgba(0,0,0,.2); /*文字に影*/
	cursor: pointer;               /*マウスカーソル指定*/
	border-radius: 10px;           /*boxをCSS3角丸指定*/
    -moz-border-radius: 10px;      /*boxをFirefox用角丸指定*/
    -webkit-border-radius: 10px;   /*boxをSafari,Chrome用角丸指定*/
}

.demo-box-left {
    float:left;                    /*boxを左寄せ*/   
	width: 100px;                  /*boxの幅*/
	height: 100px;                 /*boxの高さ*/
	margin: 20px;                  /*boxの外回り余裕*/
	background: #ee82ee;           /*boxの背景色（violet）*/
	color: #ffffff;                /*文字色*/
	font-size: 24px;               /*文字サイズ*/
	font-weight: bold;             /*太字*/
	line-height: 100px;            /*文字の高さ*/
	text-align: center;            /*文字の横位置中央*/
	text-shadow: -2px 2px 0px rgba(0,0,0,.2); /*文字に影*/
	cursor: pointer;               /*マウスカーソル指定*/
	border-radius: 10px;           /*boxをCSS3角丸指定*/
    -moz-border-radius: 10px;      /*boxをFirefox用角丸指定*/
    -webkit-border-radius: 10px;   /*boxをSafari,Chrome用角丸指定*/
}
.demo-box-right {
    float:left;                    /*boxを左寄せ*/   
	width: 100px;                  /*boxの幅*/
	height: 100px;                 /*boxの高さ*/
	margin: 20px;                  /*boxの外回り余裕*/
	background: #3cb371;           /*boxの背景色（mediumsegreen）*/
	color: #ffffff;                /*文字色*/
	font-size: 24px;               /*文字サイズ*/
	font-weight: bold;             /*太字*/
	line-height: 100px;            /*文字の高さ*/
	text-align: center;            /*文字の横位置中央*/
	text-shadow: -2px 2px 0px rgba(0,0,0,.2); /*文字に影*/
	cursor: pointer;               /*マウスカーソル指定*/
	border-radius: 10px;           /*boxをCSS3角丸指定*/
    -moz-border-radius: 10px;      /*boxをFirefox用角丸指定*/
    -webkit-border-radius: 10px;   /*boxをSafari,Chrome用角丸指定*/
}
.demo-box-change {
    float:left;                    /*boxを左寄せ*/   
	width: 100px;                  /*boxの幅*/
	height: 100px;                 /*boxの高さ*/
	margin: 20px;                  /*boxの外回り余裕*/
	background: #4169e1;           /*boxの背景色（royalblue）*/
	color: #ffffff;                /*文字色*/
	font-size: 24px;               /*文字サイズ*/
	font-weight: bold;             /*太字*/
	line-height: 100px;            /*文字の高さ*/
	text-align: center;            /*文字の横位置中央*/
	text-shadow: -2px 2px 0px rgba(0,0,0,.2); /*文字に影*/
	cursor: pointer;               /*マウスカーソル指定*/
	border-radius: 10px;           /*boxをCSS3角丸指定*/
    -moz-border-radius: 10px;      /*boxをFirefox用角丸指定*/
    -webkit-border-radius: 10px;   /*boxをSafari,Chrome用角丸指定*/
}
</style>
<!-- /css for js -->

表示（wiggle）したい部分の記載

ボディ部分（<body>と</body>の間）に以下のように記載する。

<h4>デモ１－デフォルト設定</h4>
<div id="vib1" class="demo-box" >Default</div>
<div style="clear:both;"><div>
<h4>デモ２－オプションを設定した場合</h4>
<div id="vib2left" class="demo-box" >demo</div>
<div id="vib2right" class="demo-box" >demo</div>
<div style="clear:both;"><div>
<h4>デモ３－画像を使用しオプションを設定した場合</h4>
<div style="float:left; margin-right:20px;">
<img id="vib3left" src="http://（アップロード先URL）/Music.png" /></div>
<div style="float:left; margin-right:20px;">
<img id="vib3right" src="http://（アップロード先URL）/Phone.png" /></div>
<div style="clear:both;"><div>
<br />
<h4>デモ４－動作変化の前後でクラス指定を変えた場合</h4>
<div class="demo-box-left" >Class</div>
<div class="demo-box-right" >Class</div>
<div style="clear:both;"><div>

デモ表示

デモ１－デフォルト設定

Default

デモ２－オプションを設定した場合

demo
demo

デモ３－画像を使用しオプションを設定した場合

デモ４－動作変化の前後でクラス指定を変えた場合

Class
Class
スポンサーリンク
レクタングル（大）広告




もし良ければお願いします。

良かったらフォローお願いします。

, , , jump-up

スポンサーリンク
レクタングル（大）広告