画像・テキストにグリッチ処理を追加するjQueryプラグイン「GHYPERGLITCH」

2018/05/31 2分

こんにちはタクゾウです。
今回はグリッチ処理を画像・テキストにかけることができるjQueryプラグインの「GHYPERGLITCH」について紹介します。
画像やdiv要素にクラス名を指定するだけでグリッチ処理をかけれるので他のプラグインと比べても使いやすいです。

GHYPERGLITCHを使用したグリッチ処理
コード説明
まとめ

GHYPERGLITCHを使用したグリッチ処理

実際にテキストと画像にグリッチ処理をかけたでもはこちらになります。

参考 DEMOGlitch Effect

プラグインの公式サイトはこちらです。

参考 Glitch jQuery plugin @ |hyperglitch|

コード説明

グリッチを対応させる要素にはclass=”glitch”を指定してあります。
親要素のサイズの影響を受けないようにspanタグにclass名を指定しましょう。

html

<h1 class="ttl">TEXT SAMPLE</h1>
<p class="txt"><span class="glitch">Glitch Effect</span></p>
<h1 class="ttl">IMGAGE SAMPLE</h1>
<p class="img">
  <span class="glitch">
    <img src="./assets/images/img_sample.jpg" alt="">
  </span>
</p>

グチッチ処理を適応させる記述
関数を走らせるタイミングは、画像を読み込んだ後のタイミングにしてください。

javascript

$(window).on("load",function(){
  $('.glitch').glitch();
});

GHYPERGLITCHプラグインのオプションです。

javascript

bg: null,    //背景色
maxint: 3,     // グリッチ間の最大間隔(3秒以内のタイミングでグリッチを繰り返します。)
minint: 1,      // グリッチ間の最小間隔(1秒以上のタイミングでグリッチを繰り返します。)
maxglitch: 400,   // 最大数のツイッチ
hshift: 10,      // 最大水平シフト(この値が大きいほど、グリッチが派手になります。)
vshift: 10,      // 最大垂直シフト(この値が大きいほど、グリッチが派手になります。)
direction: 'horizontal' // 'horizontal', 'vertical' or 'random'