texteffect2019.05.17ここ数年でHTML、CSS、Javascriptだけで表現出来ることが非常に増えてきています。ほんの少し前まではFlashや動画に頼らないといけなかったことも、今やそんな必要が無くなってきました。非常に複雑な動きをするテキストエフェクトもその一例です。今回はCSS、Javascriptのコピペだけで実装可能なちょっとユニークなテキストエフェクトを紹介します。最近流行っている(と言われている)「ゆがみ系」のテキストエフェクトです。Textまずは、昔のアナログテレビみたいな効果。こちらはJavascriptは使用せず、CSSだけでエフェクトを表現しているので動作も軽いです。CodePen.Ants!「Ants(アリ)」と名付けられたテキストエフェクト。その名の通りアリのように見える黒いノイズがテキストを形作っています。Textテキスト上にカーソルをhoverさせると、左から伸びる線に合わせて一文字一文字が飛び散ります。Text「Squiggly=しわ」という意味のテキストエフェクト。画面いっぱいに背景画像を広げて、その上に乗せると良い感じになりそうな気がします。Distortionテキストにカーソルを当てると青とピンクのレイヤーが細かく動きます。div:hover:afterの値で青とピンクの文字を編集できます。Effectスクロールするとテキストが他の文字とシャッフルされ、元のテキストに戻ります。