すぐに使える!?動くすごいテキストエフェクト10選

すぐに使える!?動くすごいテキストエフェクト10選

近頃メインビジュアルやタイトルなどで、動きを加えたテキストをよく見かけるようになりました。動きが一つ加わるだけで、シンプルなデザインでも味が出ます。
今回もCodePenから動くものを中心にテキストエフェクトを集めてみました。

1. plastkort.nu

カードがくるくる回るエフェクト。文字は左から順番に出てきます。
シンプルでさりげない動き

See the Pen plastkort.nu by Marco Barría (@fixcl) on CodePen.0

2. burning text with two.js

筆跡みたいなエフェクト。筆記体のフォントにぴったりですね。

See the Pen burning text with two.js by Caroline Artz (@carolineartz) on CodePen.0

3. Particle to Text motion

粒が集まってテキストを作るようなエフェクト。
どこかのサイトで見たことあるような気がします。

See the Pen Particle to Text motion by ankitaShrma (@ankitashrma) on CodePen.0

4. Sketch.js + CoffeePhysics Awesomeness

粒が集まってできたエフェクト。
こちらはカーソルを近づけると粒が動きます。

See the Pen Sketch.js + CoffeePhysics Awesomeness by dhaakon (@dhaakon) on CodePen.0

5. ECP Text Motion

こちらもよく見かけるタイプのエフェクト。
下からにゅっとテキストが出てくるシンプルな動きです。

See the Pen ECP Text Motion by John Avent (@javent) on CodePen.0

6. Scroll Text Motion

スクロールしていくとパララックスのような動きをします。
これもよく見かけますね。

See the Pen Scroll Text Motion by Khopes (@Khopes) on CodePen.0

7. Text moving on y-co-ordinates with hover effect and color changing text

カーソルに合わせてテキストが偏ります。
グラデーションもいい感じに動いています。

See the Pen Text moving on y-co-ordinates with hover effect and color changing text by vishalsankpal (@vishalsankpal) on CodePen.0

8. Tilted Box

ボタンみたいにぽよんとしたエフェクト。
いつ使うの?って聞かれるとちょっと困りますが、かわいかったので紹介しました。笑

See the Pen Tilted Box by Wryte (@Wryte) on CodePen.0

9. Time Is Gold

砂時計のようにテキストが流れていくエフェクト。オシャレですね。

See the Pen Time Is Gold by Asyraf Jamil (@asyrafjamil) on CodePen.0

10. Awesome text effect

8bit調のエフェクト。
マトリックスみたいでちょっとかっこいいですね。

See the Pen Awesome text effect by Cosmic Voyager (@cosmicvoyager) on CodePen.0