Webデザイン
投稿日:

【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