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

動的タイポグラフィ(テキストアニメーション)

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

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

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

目次

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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.0

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

おわりに

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

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

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

※Workship MAGAZINEでは日々情報の更新に努めておりますが、掲載内容は最新のものと異なる可能性があります。当該情報について、その有用性、適合性、完全性、正確性、安全性、合法性、最新性等について、いかなる保証もするものではありません。修正の必要に気づかれた場合は、サイト下の問い合わせ窓口よりお知らせください。

30,000人以上が使う日本最大級のお仕事マッチングサービス『Workship』

「フリーランスとして、もっと大きな仕事にかかわりたいな……」
「企業で働いてるけど、副業でキャリアを広げていきたいな……」
「報酬が低くて疲弊している。もっと稼げるお仕事ないかな……」

フリーランス・複業・副業向けお仕事マッチングサービス『Workship(ワークシップ)が、そんな悩みを解決します!

  • 30,000人以上のフリーランス、パラレルワーカーが登録
  • 朝日新聞社、mixi、リクルートなど人気企業も多数登録
  • 公開中の募集のうち60%以上がリモートOKのお仕事
  • 土日、週1、フルタイムなどさまざまな働き方あり
  • 時給1,500円〜10,000円の高単価案件のみ掲載
  • お仕事成約でお祝い金10,000円プレゼント!

登録から案件獲得まで、利用料は一切かかりません。一度詳細をのぞいてみませんか?

>フリーランス・複業・副業ワーカーの方はこちら

>法人の方はこちら

Workship CTA

SHARE

RELATED

  • お問い合わせ
  • お問い合わせ
  • お問い合わせ