アナログノイズのような「グリッチエフェクト」をCSSで実現する方法
- 2019/05/04
- 2019/05/14
概要
グリッチエフェクト、いわゆるアナログノイズが乗った映像の乱れのような効果があります。
動画では良く利用されておりちょっとオシャレな演出ですよね。
シンプルなページにもちょっとしょた動きが欲しいという時に役に立つこの「グリッチエフェクト」は、CSS だけで簡単に実装できますので紹介していきます。
グリッチエフェクトの実行例
グリッチエフェクトがどんな感じなのか、アナログテレビに触れたことがなくピンとこない方もいるでしょう。
ですので、まずは、実行例を以下に示します。
色に関して言えば、コントラストがハッキリしている境界で赤や緑といった色が滲んで見えるものです。
写真を趣味にされている方は色収差と言えば分かりが良いでしょう。
また、ブラウン管の電子銃近くに磁石を近づけたような歪効果も加えればグリッチエフェクトの完成です。
液晶テレビでは見られないノイズの乗り方なので最近ではめっきり見なくなり、より懐かしい感じのあるエモい雰囲気が得られますね。
CSSで実装しよう！
実装自体は簡単なのでまずは CSS コードを確認して下さい。
上記の通り、文字に色付きの影を2色分付けて、transform の skew で傾けるだけです。
これをそれっぽく見えるように keyframes に登録して animation させれば完成です。特に解説はありません。
注意点
一点だけ、注意点です。
文字の位置合わせに transform を使っている場合は animation を追加するだけだと表示がズレてしまいます。
ですので、位置合わせで translate(-50%, -50%) などを指定していれば、keyframes の方にも追加するようにして下さい。
例) "transform : skewX(0deg);" → "transform : skewX(0deg) translate(-50%, -50%);"
これを全てに対して行います。
まとめ
以上、グリッチエフェクトを実現させる方法でした。
Google Font などでいい雰囲気の文字を使えば良い感じになるでしょう。色々と試してやって下さい。