こんにちはタクゾウです。
今回はグリッチ処理を画像・テキストにかけることができる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 | Codropscssのみで実装可能
参考 CSS Glitched Text画像のみやdivごとGlitchを掛ける事ができる
参考 glitch glitch glitchWeb制作を勉強している人の参考になれば幸いです。
コメントを残す