横方向にシェイクするアニメーションを実装「Shake」
当ページのリンクには広告が含まれています。
スポンサーリンク
横方向にシェイクするアニメーションを実装するプラグイン「Shake」を紹介します。
jQueryプラグイン「Shake」
このプラグインを使えば、横方向にぶるぶるとシェイク（振動）するアニメーションを実装することができます。
オプションでは振動する「回数」「幅」「（振動をはじめる）方向」「時間」を指定することができます。
スポンサーリンク
それではデモページのアニメーションをご覧ください。
ソース（ HTML + jQuery ）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="description" content="Shake のデモでーす。">
<title>Shake - jQuery Plugin Demo</title>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="jquery.shake.js"></script>
<script>
$(document).ready(function () {
$("#demo1").shake({
vibration: 20,
amplitude: 300,
direction: "right",
timeFirstDeviation: 1000,
});
$("#btn").click(function () {
$("#demo2").shake();
});
});
</script>
</head>
<body>
<p><a href="https://webkaru.net/jquery-plugin/shake/">「jQueryプラグインまとめ」に戻る</a></p>
<h1 id="demo1">Shake のデモでーす。</h1>
<p><button id="btn" type="button">ボタンをクリック！</button></p>
<h2 id="demo2">シェイク！シェイク！</h2>
</body>
</html>
スポンサーリンク