CSS/JavaScriptで文字に動きを！テキストアニメーション30選

昨今、Webデザイン上のありとあらゆる部分に「動きをつける」、つまり動的エフェクトを加えるのが流行しています。きっとあなたもこのクレイジーなトレンドに乗り、徐々にデザインの細部にこだわりを持ちはじめていることでしょう

今回はそんな動的エフェクトの中でも、テキストやロゴにアニメーションを加える「テキストアニメーション（動的タイポグラフィー）」に特化した事例をご紹介します。

タイポグラフィーで表現できることが、変わったフォントや華やかなホバー効果程度だと考えているのなら、それは間違いだと本記事で証明しましょう。

1. 3Dエフェクトをつけたテキストアニメーション

CSSのテキストシャドウで斜体の文字に3Dエフェクトをつけた、映画やゲームを思わせるテキストアニメーション。とくに1930年代のクラシックな映画を想起させます。

下部の「RESTART」というボタンはJavaScriptで作られていますが、それ以外を構成しているのはCSSのみ。長めの見出しにおすすめです。

See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.

2. テキストが上から落ちてくるアニメーション

7種類のテキストアニメーションをまとめて見られる、お得感のあるコードスニペット。

ランディングページや、Webアプリのホームページなどに使えば、注目を集めること間違いなし。静的な文字よりも印象に残るはずです。

こちらのテキストアニメーションはCSSのみで実装されており、簡単に微調整できるのも嬉しいポイントですね。

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

3. ピクセルエフェクトを用いたテキストアニメーション

ユニークなピクセルエフェクトが魅力的なテキストアニメーション。HTML5のCanvasで遊ぶことを目的に作られたこのコードスニペットは、ほぼJavaScriptで構成されています。

ベースとして使われているフォントはNato Serif。Nato Serifで書いた文字をcanvath要素内で変形可能な要素に変換し、さらにJavaScriptで小さな点に分解しています。

See the Pen Typography Animation by Georgi Nikoloff (@gbnikolov) on CodePen.

4. タイピング風のテキストアニメーション

ポートフォリオサイトなどで見かけることが多い、リアルタイムでタイピングをしているようなテキストアニメーション。CSSとJavaScriptで作られています。

Webサイトのヘッダー、仕事の経歴、クライアントのリストまで、さまざまな場所で活用できそうですね。

順番に文字が表示されるという特性上、可読性が制限される点に注意しましょう。控えめに取り入れるのがおすすめです。

See the Pen Simple Typing Carousel by Gregory Schier (@gschier) on CodePen.

5. 虎をイメージしたテキストアニメーション

ウィリアム・ブレイクの詩『虎』からインスピレーションを得て制作されたテキストアニメーション。

「TYGERTYGER」「burning」「BRIGHT」にそれぞれ異なるスタイルとアニメーションが割り当てられています。

setTimeout()を使ってホームページのスタイルを設定し、文字に順次アニメーションをつける方法を提示してくれる好例です。

See the Pen Tyger Tyger by Joseph Martucci (@jjmartucci) on CodePen.

6. 遊びごごろのあるテキストアニメーション

文字がくるくると入れ替わりながら表示される、遊び心のあるテキストアニメーション。オープンソースのSnap.svgライブラリを使えば、このスニペットに使われているような高解像度のSVG画像を簡単に制作できます。

ランダムに表示される文字を含め、文字はすべてJavaScriptを介して動的に作られています。

See the Pen Text animation with Snap SVG by alticreation (@alticreation) on CodePen.

7. テキストがループするアニメーション

カッコで囲った文字の一部を回転させるテキストアニメーション。

リアルタイムのタイピングを模したスニペットと似ていますが、この文字を回転させるスニペットに使われているのはCSSのみ。各フレームごとに文字を設定してキーフレーム間を移動させる、ループアニメーションで構成されています。

派手すぎず、かつ一定の読みやすさも確保されているので、テキストアニメーション初心者でも取り入れやすいです。

See the Pen Text animation by Yoann (@yoannhel) on CodePen.

8. 人気ドラマにインスパイアされたテキストアニメーション

NETFLIXの人気ドラマ『アンブレイカブル・キミー・シュミット』にインスパイアされたテキストアニメーション。

アニメーションを開始するclassはJavaScriptを使ってページに追加されますが、それ以外はCSSのみで作られています。CSS3がもつ可能性の大きさを感じられますね。

See the Pen Unbreakable Kimmie Schmidt by groovc (@groovc) on CodePen.

9. ユニークなテキストアニメーション

ボックスシャドウとCSSのstrokeプロパティを使った、ユニークなテキストアニメーション。

SVGで作られた文字は選択可能で、通常の文字のようにコピーやペーストができます。すべてのブラウザに対応しており、どんなWebサイトにもフィットする繊細なアニメーションスタイルが魅力です。

See the Pen Animating SVG text by Fabio Ottaviani (@supah) on CodePen.

10. テキストが粉々に弾け飛ぶアニメーション

Arsen Zbidniakovが作成した、テキストが粉々に弾け飛ぶアニメーションです。

シンプルなアニメーションのため、訪問者を圧倒し過ぎたり、システムに負荷をかけ過ぎたりすることもありません。

GSAPツールとSVGパスを利用して作られたこのアニメーションは、テキストを組み立てたり分解したりする視覚効果を与えます。マウスカーソルをタイポグラフィーの上に合わせることで、プロセスの速度を制御して動きを変化させることも可能です。

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

11. テキストの組み立てと分解を繰り返すアニメーション

最初の例と同様に、テキストの組み立てと分解を繰り返すアニメーションです。こちらのコードスニペットは、Three.jsのみを使って構築されています。

クリック＆ドラッグによって、アニメーションの速度を制御できます。実験的なアニメーションが気に入った方は、ぜひSzeniaが開発した他の開発例もチェックしてみてください。

See the Pen
THREE Text Animation #1 by Szenia Zadvornykh (@zadvorsky)
on CodePen.

12. 幾何学的なテキストアニメーション

幾何学的な法則に基づいた抽象的テキストアニメーションは、ハイテクなイメージを与えます。訪問者は不思議な感覚を覚えるでしょう。

テキストが小さな破片で構成されており、3Dトンネル状の粒子アニメーションを動的に形成しています。

See the Pen
motion graphic typeface by ara (@ara_node)
on CodePen.

13. 多角形でテキストを構成するアニメーション

こちらもAraが制作したテキストアニメーションです。

こちらの例は、三角形、正方形、長方形などの多角形が移動しながらテキストを構成しています。まるで「見えないデジタルの手」がすべてをひとつに織り込んでゆくように見えますね。

See the Pen
motion graphic typeface. by ara (@ara_node)
on CodePen.

14. テキストをかけらに見立てたアニメーション

Nate WileyはGreensockのSplit Textを彼の得意領域でアレンジし、テキストアニメーションに再構築しました。

テキストを一定サイズに切り取り、それらを小さなカケラとして収束・分散を繰り返します。

See the Pen
GSAP Text Animation by Nate Wiley (@natewiley)
on CodePen.

15. テキストを粒子に見立てたアニメーション

Nate Wileyの事例では各テキストをカケラとして分割したのに対し、Yasunobu Ikedaは画面全体に無秩序に散らばるテキストや記号を「粒子」とし、最終的にひとつの大きなテキストとしてまとめています。

この華やかな3DアニメーションはThree.jsで表現することが可能です。

See the Pen
Many Icons in 3D using Three.js by Yasunobu Ikeda a.k.a @clockmaker (@clockmaker)
on CodePen.

16. テキストが振動するアニメーション

CSSのキーフレームとアニメーション、トランジション、JavaScript、SVG、そしてAdobe Illustratorを使って実装されたテキストアニメーションです。

単語が振動したのちに、全体が多角形の破片に分裂します。タイポグラフィーにスタイリッシュかつ破壊的なイメージを加えたいときに、このテキストアニメーションがマッチするでしょう。

See the Pen
CSS Motion Typography: Exploding Text by Dudley Storey (@dudleystorey)
on CodePen.

17. SVGパスを使ったテキストアニメーション

SVGパスを使用して表現されたテキストアニメーションです。なめらかな形、極めて繊細な線、そして液体のような動きが、優雅さと洗練された雰囲気を演出しています。

多くのプロジェクトにマッチするテキストアニメーションを探している方におすすめです。

See the Pen
SVG Path animated Text by Tamino Martinius (@Zaku)
on CodePen.

18. 循環型のテキストアニメーション

ドットが回転に伴って単語がハイライトされる、循環型のテキストアニメーション。

ユーザーの注意を、ある単語から別の単語に誘導したい時に有効ですね。

See the Pen
Think – create cycle by Mikael Ainalem (@ainalem)
on CodePen.

19. テキストがスライドするアニメーション

左から右へスライドする線に追従してテキストが移動するアニメーションです。

動きは控えめですが、応用の効きやすいテキストアニメーションとなっています。

See the Pen
P R E S S E D by Tryggvi Gylfason (@tryggvigy)
on CodePen.

20. グリッチをリアルに再現したテキストアニメーション

ひかえめでリアルなノイズが特徴。動きを小刻みに止めることで、見る人に不快感を抱かせないよう工夫しています。

CSSしか使用していないので、軽量かつ高速です。

See the Pen CSS Glitched Text by Lucas Bebber (@lbebber) on CodePen.

21. アリがたくさん集まったようなテキストアニメーション

文字を何百もの小さな粒で構成し、それぞれの粒をまるで虫のようにうごめかせるデザインは、一歩間違えると気持ち悪くなってしまうはず。

しかしこのスニペットは、悪趣味にならない微妙なバランスを捉えつつ、Blotter.jsを使って魅力的なアニメーションに仕上がっています。

See the Pen Ants! (with blotter.js) by Bennett Feely (@bennettfeely) on CodePen.

22. 水中の文字のようなテキストアニメーション

水をモチーフにしたエフェクトは、最近の密かなトレンドです。

「ゆがみ」というよりも、穏やかで美しい「ゆらぎ」を文字に与えてくれます。

See the Pen Underwater SVG Text by Katrine-Marie Burmeister (@Katrine-Marie) on CodePen.

23. インタラクティブに文字を歪められるテキストアニメーション

文字の上にカーソルをあわせると、カーソルを避けるように文字が歪みます。

発想自体はシンプルですが、液体のようになめらかな動きは、見る人を魅了するはずです。

See the Pen distortion by Corentin (@corentinfardeau) on CodePen.

24. 磁石のように文字が吸い付くテキストアニメーション

無数の粒で構成された文字に、ユニークなアニメーションがついています。

カーソルをあわせた際、粒が吸い寄せられて分散する様子は、磁石や万華鏡のようにも見えますね。

See the Pen PARTICLE TEXT by al-ro (@al-ro) on CodePen.

25. カラフルな粒があつまったテキストアニメーション

ポップな色の粒が、動きながら文字を構成しています。

コントロールパネルを使うと、描画する文字を変えられるだけでなく、速度や重力なども調整可能です。

See the Pen Text particle by Thibaud Goiffon (@Gthibaud) on CodePen.

26. 角度や文字を変えられるテキストアニメーション

エフェクトのデザインが繊細なので、大胆な見た目にもかかわらず、全体としてはエレガントに仕上がっています。

さまざまな大きさの粒で構成された文字は、好みに応じて内容を変更できます。

See the Pen dynamic 3D confetti text by Rachel Smith (@rachsmith) on CodePen.

27. 線が文字をつらぬくテキストアニメーション

文字の上にカーソルを置くと、細い線が矢のように文字をつらぬきます。

シンプルですが地味というわけでもない、細部にこだわりを感じる作品です。

See the Pen Spark Text SCSS by Tatsuya Azegami (@42EG4M1) on CodePen.

28. ちょっと不気味な手書き風のテキストアニメーション

SVGフィルターを巧みに使った、CSSオンリーのスニペット。

古いアニメーション作品を思わせる、ちょっと不気味な手書き風のデザインが特徴です。ハロウィンの時期に活躍してくれそうですね。

See the Pen Squiggly Text by Lucas Bebber (@lbebber) on CodePen.

29. インタラクティブなグリッチテキストアニメーション

カーソルを文字にあわせたときだけ、青とピンクで構成されたグリッチのアニメーションがあらわれます。

オンマウス時以外は通常の文字に見えるため、文字を悪目立ちさせたくない場合にもおすすめです。

See the Pen @VICELAND | Text Distortion by Joshua Ward (@joshuaward) on CodePen.

30. スタイリッシュなタイピングテキストアニメーション

「タイピングをアニメーションにする」という発想自体は新しいものではありません。しかしこのタイピングアニメーションは、エレガントさやスタイリッシュさという点において頭ひとつ抜けています。

普遍的なデザインなので、さまざまな分野のプロジェクトに活用できるはずです。

See the Pen Text Scramble Effect by Justin Windle (@soulwire) on CodePen.

おわりに

テキストアニメーションは、既存のWebサイトに新たな風を吹き込んでくれる存在です。あまり実用的に感じられないデザインでも、適切に取り入れれば訪問者の目をひくはず。

ぜひ今回ご紹介したスニペットを参考に、テキストアニメーションに挑戦してみてください。

（執筆：Nataly Birch、Jake Rocheleau　翻訳：Takei Tomomi 、Nakajima Asuka　編集：Workship MAGAZINE編集部　提供元：speckyboy）

デザイナー必見！タイポグラフィ作成に使える神ツール12選

Workship MAGAZINE

タイポグラフィーのデザイン基本16ルール＆作り方。原則は時に”破られる”

Workship MAGAZINE

おしゃれでかわいい英語フリーフォント120選【無料&商用可多数】

Workship MAGAZINE