今日の人気記事

  1. ボックスからはみ出たテキストをドットに変換「dotdotdot」
  2. 同じ内容の入力フォームを追加・削除「Repeater」
  3. 入力フォームのフォーカスを自動でタブ移動「Autotab」
  4. 3D球体のタグクラウドを実装 アニメ効果あり「Tag Cloud」
  5. アンカータグに確認やポップアップ効果を追加「A+」

横方向にシェイクするアニメーションを実装「Shake」

スポンサーリンク

横方向にシェイクするアニメーションを実装するプラグイン「Shake」を紹介します。

jQueryプラグイン「Shake」

このプラグインを使えば、横方向にぶるぶるとシェイク(振動)するアニメーションを実装することができます。

オプションでは振動する「回数」「幅」「(振動をはじめる)方向」「時間」を指定することができます。

スポンサーリンク

それではデモページのアニメーションをご覧ください。

「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>
スポンサーリンク

関連記事(一部広告含む)