jRumble Plugin 実装メモ jQuery

概要

jQueryプラグイン「jRumble」を使って、HTML要素にランダムな振動（ランブル）効果を追加する方法を記録したものです。jRumbleプラグインを使うことで、要素が画面上でランダムに揺れるようなビジュアルエフェクトを簡単に実装できます。

使用したコード

ランブル効果を適用したい要素をHTML内に作成します。例えば、画像やボタンなど、揺らして目立たせたい要素に適用します。

<figure class="decoration"><img class="img-glitch" src="./img/cmn/icon01.png" alt="IMG" /></figure>

<!-- jQueryの読み込み -->
<script src="./js/jquery-3.5.1.min.js"></script>
<!-- jRumbleプラグインの読み込み -->
<script src="./js/jquery.jrumble.1.3.min.js"></script>
<script>
$(function () {
	$(".img-glitch").jrumble({
		speed: 100,
	});
	$(".img-glitch").trigger("startRumble");
});
</script>

実装結果

オプションメモ

$(function () {
  // .img-glitch クラスの要素にランブル効果を設定
  $(".img-glitch").jrumble({
    speed: 100, // 揺れる速度（ミリ秒単位）
    x: 5, // 横方向の揺れの最大幅
    y: 5, // 縦方向の揺れの最大幅
    rotation: 4 // 回転の最大角度
  });

  // ランブル効果を開始
  $(".img-glitch").trigger("startRumble"); // ランブル効果の開始

  // 必要に応じてランブル効果を停止するには以下を使う
  // .img-glitchクラスの要素の揺れを停止する
  // $(".img-glitch").trigger("stopRumble");
});

View all articles