テキストに動きをつけることが可能なWeb。昨今のWebデザインにおいて欠かせない要素の一つとなっています。テキストが流れるように動くだけで強いインパクトを与えることができるでしょう。そんな動きの例をまとめた「10 Amazing CSS & JavaScript Text Animation Snippets」を今回はご紹介していきます。

Title Text Animation

効果的なアニメーション演出を実現できるCSS&javascriptがまとめられています。気になったものをピックアップしましたので、下記よりご覧ください。

詳しくは以下

Shattering Text Animation
砕け散っていたかけらが集まっていき、文字が形成されると今度は逆側から分解されていく仕様。ユーザーの注目を集める効果が高そうな演出ですね。
　
　
　

Shattering Text Animation
7つのテキストアニメーションをサンプルとして掲載。7種類とも全く違う動きをするので、見ているだけでも楽しい。全てCSSのみで作成されており、調整なども簡単に行える仕様です。
　
　
　

CSS Text animation
流れるような動きで文字が構築され、その上に重なるように更に色のついた線で文字が塗りつぶされていくように構築されていくアニメーション。ユニークな動きがスタイリッシュですね。SVGでテキストは制作されていますが、通常の文字と同じようにコピーと貼付けをすることができるようになっています。
　
　
どれもインパクトのあるテキストアニメーション。使用することができるようになれば確実にサイトのデザイン性・コーディング技術はもちろん、表現の幅も広がると思いますのでぜひ活用してみてください。

10 Amazing CSS & JavaScript Text Animation Snippets