CSS/Javascriptで実装するテキストエフェクト【ゆがみ系】

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.