Simple Glitch Pluginを使った
グリッチ効果の実装 jQuery

実装概要

jQueryで実装するプラグインで、エレメントにランダムに傷ついたようなエフェクトを追加することができます。

使用したコード

以下のように、jQueryとmgGlitchプラグインを読み込んで、テキスト要素に対してグリッチ効果を付けました。

<!-- グリッチエフェクトを適用する要素 -->
<h2 id="glitch-element" class="hyper-glitch">
  <strong>Ticket</strong><br />
  <small>チケット情報</small>
</h2>

<!-- jQueryの読み込み -->
<script src="./js/jquery-3.5.1.min.js"></script>
<!-- Glitchプラグインの読み込み -->
<script src="./js/glitch.jquery.js"></script>

<script>
  // グリッチエフェクトの初期化
  $(function () {
    // hyper-glitchクラスを持つ要素にグリッチ効果を適用
    $(".hyper-glitch").glitch({
      speed: 6000, // グリッチのスピードを設定（ミリ秒）
      maxint: 0.6, // 最大のグリッチ間隔（秒）
      minint: 0.3, // 最小のグリッチ間隔（秒）
      maxglitch: 5, // 最大のグリッチ回数
      hshift: 5, // 最大横移動量
      vshift: 5, // 最大縦移動量
      direction: "random", // グリッチの方向をランダムに設定
    });
  });
</script>

実装結果

すべてのオプションを使用したコード

<script>
  // グリッチエフェクトの初期化
  $(function () {
    // hyper-glitchクラスを持つ要素にグリッチ効果を適用
    $(".hyper-glitch").glitch({
      speed: 6000, // グリッチの動作速度（ミリ秒単位）
      maxint: 15, // グリッチの最大間隔（秒）
      minint: 5, // グリッチの最小間隔（秒）
      maxglitch: 10, // 最大のグリッチ回数
      hshift: 10, // 最大横移動量
      vshift: 10, // 最大縦移動量
      direction: "random", // グリッチの方向（ランダム）
      opacity: 0.8, // グリッチ要素の透明度（0から1の範囲）
      iterations: 3, // グリッチの繰り返し回数
      delay: 2000 // グリッチエフェクト開始までの遅延時間（ミリ秒）
    });
  });
</script>

View all articles