CSS/Javascriptで実装するテキストエフェクト【ゆがみ系】
ここ数年でHTML、CSS、Javascriptだけで表現出来ることが非常に増えてきています。ほんの少し前まではFlashや動画に頼らないといけなかったことも、今やそんな必要が無くなってきました。
非常に複雑な動きをするテキストエフェクトもその一例です。今回はCSS、Javascriptのコピペだけで実装可能なちょっとユニークなテキストエフェクトを紹介します。最近流行っている（と言われている）「ゆがみ系」のテキストエフェクトです。
Glitched Text
まずは、昔のアナログテレビみたいな効果。こちらはJavascriptは使用せず、CSSだけでエフェクトを表現しているので動作も軽いです。
See the Pen
CSS Glitched Text by Lucas Bebber (@lbebber)
on CodePen.
Ants!
「Ants（アリ）」と名付けられたテキストエフェクト。その名の通りアリのように見える黒いノイズがテキストを形作っています。
See the Pen
Ants! (with blotter.js) by Bennett Feely (@bennettfeely)
on CodePen.
Spark Text
テキスト上にカーソルをhoverさせると、左から伸びる線に合わせて一文字一文字が飛び散ります。
See the Pen
Spark Text SCSS by Tatsuya Azegami (@42EG4M1)
on CodePen.
Squiggly Text
「Squiggly＝しわ」という意味のテキストエフェクト。例えば、画面いっぱいに背景画像を広げて、その上に乗せると良い感じになりそうな気がします。
See the Pen
Squiggly Text by Lucas Bebber (@lbebber)
on CodePen.
Text Distortion
テキストにカーソルを当てると青とピンクのレイヤーが細かく動きます。HTML上で黒い文字を、CSSのdiv:hover:before, div:hover:afterの値で青とピンクの文字を編集できます。
See the Pen
@VICELAND | Text Distortion by Joshua Ward (@joshuaward)
on CodePen.
Text Scramble Effect
スクロールするとテキストが他の文字とシャッフルされ、元のテキストに戻ります。
See the Pen
Text shuffle & distort fx by Blaz Kemperle (@blazicke)
on CodePen.
