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

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

昨今、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.

Shattering Text Animation

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

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

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

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

Text Animation

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

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

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

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

Motion Graphic Typeface

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

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

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

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

Motion Graphic Typeface

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

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

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

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

Text Animation

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.

Many Icons in 3D using Three.js

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

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

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

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

CSS Motion Typography: Exploding Text

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

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

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

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

SVG Path animated

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

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

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

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

Think – create cycle

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

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

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

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

P R E S S E D

おわりに

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

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

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

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

平均時給2,900円。高単価なお仕事をしませんか?

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

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

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

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

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

>法人の方はこちら

Workship CTA

SHARE

RELATED

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