【2021年4月】現場で使える！テキストエフェクトのまとめ

こんにちは。FASTCODINGデザイナーの七転び八重子です。
Webサイトで使いたい！カッコよくて、オシャレなテキストエフェクト・アニメーションをまとめてみました。

今回は、codepenから探してみました。

CodePen Home CSS3 text-shadow effects

綺麗なテキストシャドウです。CSS3で実装可能。

See the Pen
CSS3 text-shadow effects by Jorge Epuñan (@juanbrujo)
on CodePen.

Rotating text

テキストの一部が変わっていきます。使えそうな予感。

See the Pen
Rotating text by Rachel Smith (@rachsmith)
on CodePen.

Shattering Text Animation

メインビジュアルに使えそうですね。ループにせず、最初の表示だけにして使ってみたいです。

See the Pen
Shattering Text Animation by Arsen Zbidniakov (@ARS)
on CodePen.

SVG text mask

テキストにマスクをしています。これだけで雰囲気が出ますね。

See the Pen
SVG text mask by Marco Barría (@fixcl)
on CodePen.

Hand written SVG text animation

手書きの文字を表示！商品のキャッチフレーズなど短い文字で使うと良さそうです。

See the Pen
Hand written SVG text animation by Matthew Ellis (@mellis84)
on CodePen.

Pure CSS Text Reveal

シンプルですが、こうゆうのが使えますね。

See the Pen
Pure CSS Text Reveal by Mattia Astorino (@equinusocio)
on CodePen.

ScrollTrigger: SVG Text Mask

オシャレですね。テキストマスクは流行っているのでしょうか？ポインターとかでもよく見かけます。

See the Pen
ScrollTrigger: SVG Text Mask by Tom Miller (@creativeocean)
on CodePen.

Awesome Text-Shadow

こちらのテキストシャドウも綺麗ですね。

See the Pen
Awesome Text-Shadow by Nguyen Hoang Nam (@namho)
on CodePen.

SVG Text Animation Using Stroke Offset Method

こちらもシンプルかつオシャレで使いたいですね。

See the Pen
SVG Text Animation Using Stroke Offset Method by Mack Ayache (@Ayachem)
on CodePen.

Splitted text reveal

よく見かけるアニメーションですね。

See the Pen
Splitted text reveal by Fabio Ottaviani (@supah)
on CodePen.

Spotlight Cursor Text Screen

ポインターに合わせてカラーが変化します。こちらもちょっとカスタマイズしたら使えそうです。

See the Pen
Spotlight Cursor Text Screen by Caroline Artz (@carolineartz)
on CodePen.

Emblem – Auto generate circular text

クルクル回すだけなんですが、なんかポインターとかスクロールに合わせてもう一工夫して使いたいですね。

See the Pen
Emblem – Auto generate circular text by George Hastings (@georgehastings)
on CodePen.

Fullscreen Background Video with Mix-Blend-Mode Overlay Text

このまますぐ使えそうですね。動画に合わせてテキストにマスクがかかります。

See the Pen
Fullscreen Background Video with Mix-Blend-Mode Overlay Text by Dudley Storey (@dudleystorey)
on CodePen.

Text blurring animation

オープニングで使えそうなアニメーションです。

See the Pen
Text blurring animation by Andrew Burton (@onge)
on CodePen.

popout text

こちらも使いやすそうです。シンプルですが、文字によって微妙に動きがズレているのがオシャレ。

See the Pen
popout text by Nathan Taylor (@nathantaylor)
on CodePen.

Pure CSS Text animation

何種類かあるので、「Repeat Animation」をクリックして確認してみてください。

See the Pen
Pure CSS Text animation by Mamun Khandaker (@kh-mamun)
on CodePen.

便利ツールサイト

Criate Awesome Text Effects

テキストを入力するだけで、面白いテキストエフェクトを表示してくれます。サイズ、フォントやカラーが調整ができ、gifアニメでエクスポート可能です。

Criate Awesome Text Effects