まだデータがありません。
横方向にシェイクするアニメーションを実装「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>
スポンサーリンク