テキスト・ディスプレイのアニメーション、3D効果……。
基本的なCSSや簡単なJavaScriptだけでも、どうしてなかなか素敵なテキスト・エフェクトを作ることができるのをご存じでしょうか。
本記事では、そのなかでもクールなものを選りすぐり、10個紹介します。
（以下、画像をクリックすると元のページに飛び、アニメーションおよびテキストを見ることができます。）
１・まるで映画やゲームのタイトル
See the Pen Title Text Animation by Robin Treur (@RobinTreur) on CodePen.
映画やビデオゲームで使われるスタイルを踏襲しています。大部分がCSSでできていますが、“restart”ボタンのみJavaScriptになっているので、アニメーションを何回も再生できます。
２・テキストがチカチカと明滅する
See the Pen Shattering Text Animation by Arsen Zbidniakov (@ARS) on CodePen.
ツールではなくコードでテキストシャターアニメーションを作る手間を考えると、このスニペットのすごさが分かるかと思います。テキストはSVGで構築されているのでセレクト、コピー、インタラクトはできませんが、ロゴに使ったりノンインタラクティブなエレメントに使ったりすればウェブサイトにも使えます。
３・テキストが回転する
See the Pen CSS Text animation by Mamun Khandaker (@kh-mamun) on CodePen.
文字がツイストする効果を集めたものです。ユーザの目を引き付けて強いインパクトを残してくれるので、ランディングページやホームページに使うのが良さそうですね。すべてCSSのみでつくられているので扱いやすいかと思います。
４・ピクセルで描かれる
See the Pen Typography Animation by Georgi Nikoloff (@gbnikolov) on CodePen.
ちょっと変わったアニメーションですが、不思議と見入ってしまうものがあります。大部分がJavaScriptでできていて、元々はHTML５canvasのエレメント向けに作られたものです。実用的ではないかもしれませんが、ウェブアニメーションの進化の象徴と言えるのではないでしょうか。
５・まるでタイピング
See the Pen Simple Typing Carousel by Gregory Schier (@gschier) on CodePen.
CSSとJavaScriptがバランスよく使われていて、すべてがひとつのエレメントにまとまっています。ページのリーダビリティはある程度制限されてしまいますが、誰でも真似できる楽しいエフェクトです。
６．動きがとてもユニーク
See the Pen Tyger Tyger by Joseph Martucci (@jjmartucci) on CodePen.
とてもユニークで目を奪われるアニメーションです。タイポグラフィックスタイルとアニメーションに注目すると、setTimeout()を使った素晴らしいアニメーションテキストの例だと分かります。
７・高画質のSVG画像が作れる
See the Pen Text animation with Snap SVG by alexis blondin (@alticreation) on CodePen.
このオープンソースライブラリを使えば、誰でも簡単に高画質のSVG画像がつくれます。最近広く支持されるようになってきたSVGですが、今後のウェブサイトの構築方法が大きく変わる可能性を予感させてくれるアニメーションのひとつがこれです。
８・スロットマシンのような動き
See the Pen Text animation by Yoann (@yoannhel) on CodePen.
タイピングカーソルのアニメーションと少し似ていますが、こちらはCSSのみでつくることができます。ホームページではこちらの方が読みやすいので、面白いテキスト効果を探しているならおすすめですよ。
９・Netflixの人気シリーズから生まれた
See the Pen Unbreakable Kimmie Schmidt by groovc (@groovc) on CodePen.
Netflixの人気シリーズ“Unbreakable Kimmie Schmidt”から名前をとったスニペットです。テキストスタイルとカスタムアニメーション以外はCSSで構築されています。CSS３の可能性を思い知らされますね。
１０・動きが目を惹く
See the Pen Animating SVG text by Fabio Ottaviani (@supah) on CodePen.
テキスト自体はすべてSVGで構築されていますが、文字を自由にコピー／ペーストすることも可能です。すべてのブラウザに対応しており、どのウェブサイトにも適用できるようになっています。
※本記事は、10 Amazing CSS & JavaScript Text Animation Snippetsを翻訳・再構成したものです。また2017年5月30日に加筆・修正を行っております。
おすすめ新着記事
おすすめタグ