JavaScriptで文字を動かすテキストアニメーション10選を現役エンジニアが紹介【初心者向け】

初心者向けにJavaScriptで文字を動かすテキストアニメーション10選について現役エンジニアが紹介しています。テキストアニメーションの方法にはテキストを移動させたり、色を変更したり、拡大縮小など変形させることができます。テキストアニメーションを行うライブラリについて解説します。

TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。

JavaScriptで文字を動かすテキストアニメーション10選について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

田島悠介

今回は、JavaScriptに関する内容だね!

大石ゆかり

どういう内容でしょうか?

田島悠介

JavaScriptで文字を動かすテキストアニメーション10選について詳しく紹介していくね!

大石ゆかり

お願いします!

 

目次

 

テキストアニメーションとは

魅力的なサイトには必ずと言っていいほど、インパクトあるテキストアニメーションが実装されているかと思います。

ページを開いたときに表示されるテキストや、マウスオーバーなどのアクションに連携するものなど種類も様々にあります。

[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中

テキストアニメーションでできること

テキストアニメーションの表現方法は本当に沢山あります。

  • 移動系:最もシンプルな方法で、文字を左右上下などへ移動させるアニメーションです
  • 変色系:これも良くあるアニメーションで文字の色を変更させます
  • 3D系:最近流行りのアニメーションで、文字を立体に表現することが出来ます
  • 変形系:これも最近よく見ます。文字を分解したり、結合させてみたり、文字を変形させるアニメーションです

ざっと分類してみました。これにあたはまらないものや、組み合あわせされたものなどもあるかと思います。また、アニメーションが発生するタイミングなども多数あるかと思います。

テキストアニメーションを実装する方法

実装方法としては、JavaScriptだけではなく、CSSのみで出来るものありますし、jQueryなどライブラリーで提供されているものなどもあります。

テキストアニメーション10選

animate.js

文字だけではなく色々なアニメーションが表現できます。実装は難しいですが、複雑なアニメーションを表現することが出来ます。

jQuery TextFX

これだけでフェイドイン・スライドイン・一文字づつ表示のアニメーションを表現できます。とりあえず簡単にアニメーションを表現するのに向いています。

Typed.js

タイプライターのように文字が打ち出されるアニメーションが表現できます。

iTyped.js

こちらもタイプライターのように文字が打ち出されるアニメーションが表現できます。ただし、こちらはjQueryに依存することなく利用できるので、場合によっては使い勝手がよいかと思います。

Splitting.js

文字を浮き上がさせるようなアニメーションが表現できます。

Three.js

3Dアニメーション用のライブラリーです。TextGeometryを利用して文字を3D化できます

Blotter.js

文字を波のように揺らすアニメーションなど、5種類ほどのアニメーションパターンが表現できます。

textillate.js

jQuery のプラグインです。[animate.css]でエフェクトを表現するのでアニメーションの種類が豊富です。

Granim.js

グラデーションを制御するライブラリーですが、文字にも応用できるので、シンプルなテキストアニメーションを表現できます。

LetterFx

文字を回転しながら表示(spin)したり、徐々に文字を見せる(fade)などシンプルなアニメーション表現が複数できます。

 

まとめ

今回は、JavaScriptと連携して表現できるテキストアニメーションをご紹介しました。

実装方法は各キーワードで検索して調べてみてください。テキストアニメーションにはJavascriptを利用せず、CSSのみで表現できるものなども沢山ありますので、そちらも合わせて挑戦してみてください。

筆者プロフィール

小宮山晃史(こみやまこうじ)

現在はOracle系システムの導入コンサルに勤め、仕事でコーディングをする機会は少なくなくなっているが、ライフワークで数多くの言語を勉強中。

iphoneのアプリ開発やWEBサーバの構築など幅広く挑戦しています。

 

大石ゆかり

内容分かりやすくて良かったです!

田島悠介

ゆかりちゃんも分からないことがあったら質問してね!

大石ゆかり

分かりました。ありがとうございます!

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。