JavaScriptを使って、指定したテキストを一文字ずつ表示していく方法をご紹介いたします。
動きについては、以下デモページをご参照ください。
JavaScriptを使ってテキストを一文字ずつ表示させる方法
まずは文字を表示させる領域をHTMLで記述します。
<body onload="printMoji()"> <div id="text"></div>
body要素に「onload=”printMoji()”」を追加しておき、ページ表示時にスクリプトを読み込みます。
スクリプトは以下のようになります。
<script>
var i=0;
var printString;
var moji="一文字ずつ表示しますよ～一文字ずつ表示しますよ～";
function printMoji() {
document.getElementById("text").innerText=moji.substring(0,i++);
if(i<=moji.length) {
setTimeout("printMoji()",300);
}
}
</script>
mojiに表示するテキストを入れ、getElementByIdで表示領域のIDを指定します。
表示する速度を調整したい時は、setTimeoutの数字を変更してください。数字が大きいほど遅くなります。
あとがき
一文字ずつ表示することで、タイプライターで文字を入力しているような表現ができますね。
ちょっと変わったテキストの表示をしたい時はぜひ！参考になれば幸いです。