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

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

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'

まとめ

簡単なグリッチ処理をする場合は、このプラグインで問題ないと思います。
※グリッチ処理をかけた状態で、可変をさせると要素が崩れてしますので、固定で指定するようにしましょう。

その他の使えそうなグリッチ処理をするプラグインは下記になります。

様々なオプションがあるプラグイン

参考 CSS Glitch Effect | Codrops

cssのみで実装可能

参考 CSS Glitched Text

画像のみやdivごとGlitchを掛ける事ができる

参考 glitch glitch glitch

Web制作を勉強している人の参考になれば幸いです。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


Translate »