javascriptでテキストアニメーションを掛ける方法

テキストを1文字ずつ表示したり特殊なアニメーション演出で表示（消去・ループ）させるとカッコいいですよね。

ページ上部のタイトルテキストなどに適用すればデザイン性が上がります。

タイプライター的な演出や、消去する文字の操作、HTMLソースの挿入などができます。

javascriptでテキストをアニメーションさせる

テキスト文字が自動で打ち出されていくアニメーション効果を、javascriptで表現したものです。

シンプルなタイプライター的な演出以外に、記号が混ざった様な凝ったものもできます。

テキストとしてだけでなくHTMLソースとしても打ち出す事が可能です。

autoWrite.min.jsテキストアニメーション

いずれも文字列を1文字ずつ表示したあと、1文字ずつ消していくループを繰り返します。

ループは解除したり、文字の表示および消去のタイミングも設定できます。

HTMLソース（一例）

<div class="auwt"> <h4><i class="fa fa-edit"></i> <b class="autoWriteBreak 100">アニメーションサンプルその1タイトル</b></h4> <p>ここは固定文章部分です。<b class="autoWrite 100 500">ここからが自動書記表示されるテキスト部分になります。</b></p> <p>必要なプログラミング言語 <b class="autoWrite 200 800">JavaScript, HTML5, CSS3, Javascript</b></p> <p>データベース言語の種類 <b class="autoWrite 250 1000">Microsoft SQL Server, PostgreSQL, MySQL</b></p> </div>

上記のような感じでアニメーションさせたい箇所をタグで囲います（今回は「bタグ」を使っています）。

それ以外の部分は自由ですし、必須となるCSSもありません。

JSコード

ページフッターなどで下記の通り、jsファイルを読み込みます。

<script src="js/autoWrite.min.js"></script>

autoWrite.min.js内のコードを紹介しておきます。それ程長いものではありません。

autoWrite.min.jsコード

const autoWriteDOM=document.querySelectorAll(".autoWrite");const autoWriteWords=[];const autoWriteSpeed=[];const autoWriteWait=[];const breakDOM=document.querySelectorAll(".autoWriteBreak");const breakWords=[];const breakSpeed=[];const breakWait=[]; class autoWrite{constructor(output, words, speed, wait){this.output=output; this.words=words; this.speed=speed; this.wait=wait; this.wordsIndex=0; this.outputText=""; this.isDeleting=false; this.typing();}typing(){this.currentIndex=this.wordsIndex % this.words.length; this.wordsText=this.words[this.currentIndex]; if (this.isDeleting){this.outputText=this.wordsText.substring(0, this.outputText.length - 1);}else{this.outputText=this.wordsText.substring(0, this.outputText.length + 1);}let speed=this.speed; if (this.outputText===this.wordsText){this.isDeleting=true; speed=this.wait;}else if (this.outputText===""){this.isDeleting=false; this.wordsIndex++; speed=this.speed;}this.output.innerHTML=this.outputText; setTimeout(()=> this.typing(), speed);}}typingAction(breakDOM, breakWords, breakSpeed, breakWait, null);typingAction(autoWriteDOM, autoWriteWords, autoWriteSpeed, autoWriteWait, ",");function typingAction(first, second, third, fourth, makeArray){first.forEach((item, index)=>{second.push(item.innerHTML.split(makeArray)); third.push(item.classList[1]); fourth.push(item.classList[2] !==undefined ? item.classList[2] : 99999999); new autoWrite(item, second[index], third[index], fourth[index]);});}

設置の仕方

bタグのclassセレクタで「autoWrite」と入れてそれぞれ数値を設定しましょう。

「class="autoWrite 100 500"」という感じです。

この時数字を「2つ」入れるのは必須ですので、必ず入れる様にしましょう。

設定する数値の意味

例えば「autoWrite 100 500」と入れた場合

※数値は1000で「1秒」を示します。

ループを解除するには

表示と消滅を繰り返すループを解除するには、autoWriteの後ろに続けてBreakと入れます。

<b class="autoWriteBreak 100">テキスト</b>

Breakを入れると1度しかアニメーションしませんので、ページ上部のタイトル演出等で使う場合は良いでしょう。

1度しか動かないため、すぐ見えるところで使わないとアニメーションに気づかれない可能性があります。

Breakを入れた場合、そのあとに続く数値は「表示タイミングの数値１つのみ」になります。

複数のテキストを表示させるには

アニメーションの中で複数のテキストを個別に表示させたい場合は、テキストの区切りに「,」を使います。

<b class="autoWrite 200 800">JavaScript, HTML5, CSS3, Javascript</b>

「,」の前までが1セットとなって順々に表示され、全て表示され終わったら最初に戻ります。

アニメーションサンプル

映画演習風テキストアニメーション

映画の演出で使われそうな、カッコいいアニメーションです。

HTMLソース

<h2 class="text"></h2>

上記はh2見出しにしていますが、セレクタを"text"にしていれば後は自由です。

タグの中には何もテキストは入れません。jsコードの中に書きます。

JSコード

下記のjsファイルを読み込みます（textセレクタを入れたタグの直後に入れましょう）。

<script src="js/textAnimation.js"></script>

textAnimation.jsコード

読み込んだtextAnimation.jsの下に続けて以下のコードを記述します。

jsコード

<script> const phrases = ["映画のタイトル演出の様な", "テキスト", "アニメーション！"]; const el = document.querySelector(".text"); const fx = new TextScramble(el); let counter = 0; const next = () => { fx.setText(phrases[counter]).then(() => { setTimeout(next, 1500); }); counter = (counter + 1) % phrases.length; }; next(); </script>

上記jsファイルの中で表示させるテキストを入力します。

テキストは「,」で区切って複数設定する事ができます。

7行目の1500の数値は、次のアニメーションを起こすまでの時間です（1.5秒）。

アニメーションサンプル

お洒落な演出ですが、テキストは直接HTMLソース上に入っていないので、乱用してGoogleから怪しまれない様にしましょう。

core.jsテキストアニメーション

簡単に実装できるcore.jsを使ったテキストアニメーションです。

以下のサンプルは全てcore.jsのファイルを中核としており、今回は4つのパターンをご紹介します。

共通HTMLソース

<div id="typewriter"></div>

一例としてdivタグで囲っています。typewriterのIDセレクタを付けますが、中には何も入れません。

共通JSコード

直後に以下の核となるjsコードを読み込みます。

<script src="js/core.js"></script>

core.jsコード

上記のcore.jsを読み込むまでは共通です。その後に書くjsコードによってアニメーション表現が変わります。

パターンを4つ紹介します。

パターン1:1回のみ表示する場合

読み込んだcore.jsに続けて下記コードを記述します。

jsコード（パターン1）

<!--共通コード--> <script src="js/core.js"></script> <!--パターンコード--> <script type='text/javascript'> const typewriter = new Typewriter('#typewriter'); typewriter.typeString('Hello World!') .callFunction(() => { console.log('String typed out!'); }) .pauseFor(2500) .deleteAll() .callFunction(() => { console.log('All strings were deleted'); }) .start(); </script>

3行目にアニメーションさせるテキストを入れましょう。

本サンプルはテキストが表示されるのは1回限りで、一度消えた後はループしません。

デベロッパーツールで確認できる

消えてしまった後のために、文字の表示後と消去後にそれぞれコンソールlogに警告を出すようにしています。

デベロッパーツールで確認ができます。

ループなしサンプル（ログ表示あり）

最初はカーソルしか見えてないはずですので、F5を押すなどして更新してください。

F12を押すなどデベロッパーツールで確認すると、console表示が出ているのがわかると思います。

パターン2:文章を複数回に分けて表示する場合

読み込んだ共通ファイルcore.jsに続けて、次は下記コードを記述してみましょう。

jsコード（パターン2）

<!--共通コード--> <script src="js/core.js"></script> <!--パターンコード--> <script type="text/javascript"> const instance = new Typewriter('#typewriter', { strings: ['Hello', 'World'], autoStart: true, loop: true, }); </script>

テキストを複数設定しループさせるパターンです。物語調の演出ができます。

複数テキストサンプル

パターン3:ループ処理&テキスト消去のコントロール

次は文字の消去動作を制御するタイプのjsコードです。

jsコード（パターン3）

<!--共通コード--> <script src="js/core.js"></script> <!--パターンコード--> <script type='text/javascript'> const typewriter = new Typewriter('#typewriter', { loop: true, }); typewriter.typeString('本テキストはループ処理されます。') .pauseFor(1500) .deleteAll() .typeString('本テキストは7文字しか消えません。') .pauseFor(1500) .deleteChars(11) .typeString('<strong>spanタグが入っています。<strong>') .pauseFor(1500) .start(); </script>

コードの流れ

複数（3セット）のテキストを構成しつつ、冒頭でループ処理もしています。

1セット目から2セット目に変わる際は1セット目の文字を全て消します。

2セット目から3セット目に変わる際は2セット目から11個だけ文字を消します。

3セット目はタグ付きのテキストを入れる事ができる例です。

それぞれの間に1.5秒の間隔を空けています。

ループ&部分消去&タグ入りサンプル

パターン4:HTMLタグ挿入アニメーション

jsコード（パターン4）

<!--共通コード--> <script src="js/core.js"></script> <!--パターンコード--> <script type="text/javascript"> const instance = new Typewriter('#typewriter', { strings: ['<h3>h3テキスト</h3>','<h4>h4テキスト</h4>', '<blockquote>ブロッククォート</blockquote>', '<span class="b red">スパン</span></p>'], autoStart: true, loop: true, }); </script>

全てHTMLタグ入りのソースを構成したサンプルです。

本ページに適用されたstyleで各見出しやテキストが出現します。

HTML挿入サンプル

要素自体が出現・消滅するため段ががくがくすると思います。どうぞご了承下さいませ。

一押し人気コーナー紹介