2分SHAREツイートシェアはてブGoogle+PocketLINEこんにちはタクゾウです。今回はグリッチ処理を画像・テキストにかけることができるjQueryプラグインの「GHYPERGLITCH」について紹介します。画像やdiv要素にクラス名を指定するだけでグリッチ処理をかけれるので他のプラグインと比べても使いやすいです。実際にテキストと画像にグリッチ処理をかけたでもはこちらになります。Effectプラグインの公式サイトはこちらです。|hyperglitch|コード説明グリッチを対応させる要素にはclass=”glitch”を指定してあります。親要素のサイズの影響を受けないようにspanタグにclass名を指定しましょう。関数を走らせるタイミングは、画像を読み込んだ後のタイミングにしてください。$('.glitch').glitch();});GHYPERGLITCHプラグインのオプションです。チ間の最大間隔(3秒以内のタイミングでグリッチを繰り返します。チ間の最小間隔(1秒以上のタイミングでグリッチを繰り返します。最大水平シフト(この値が大きいほど、グリッチが派手になります。最大垂直シフト(この値が大きいほど、グリッチが派手になります。'random'まとめ簡単なグリッチ処理をする場合は、このプラグインで問題ないと思います。※グリッチ処理をかけた状態で、可変をさせると要素が崩れてしますので、固定で指定するようにしましょう。その他の使えそうなグリッチ処理をするプラグインは下記になります。glitchWeb制作を勉強している人の参考になれば幸いです。コメントをキャンセルメールアドレスが公開されることはありません。*サイト上に表示された文字を入力してください。次の記事Three.js:グループ化を用いて3D空間でアナログ時計を作...このブログの運営者どうもタクゾウです。このブログは、Web系フロントエンジニアが日々学んだことをまとめて行くブログです。基本的に自分が読み返すようで投稿してますが内容は誰がみてもわかりやすいよう書いています!よろしくお願いします!人気の記事1Wix(ウィックス)はビジネス向きではない。