以前にテキストを1文字ずつタイプライター風に表示するjQueryプラグインを紹介しましたが、
HTMLもスクリプトもシンプルでもっと扱いやすい構成で同様の動作が実現できないか
試しに作ってみたので紹介してみたいと思います。
jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法
まずは動作サンプルから。
「jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示
ページロードするとテキストが
1文字ずつタイプライターのように表示されます。
この動作の全体構成について
まずはHTMLから。
◆HTML <p class="split">jQueryでテキストを一文字ずつ読み込むサンプルテキストです。</p>
HTMLでは通常の文章を構成する時と同じように
テキストを＜p＞タグで囲ってあります。
サンプルでは＜p＞タグにクラスをつけていますが
特にクラスをつけることが必須ではありません。
もちろん＜p＞タグ以外でも
＜div＞や、＜span＞でも実装可能です。
これに対してCSSは以下の様になります。
◆CSS
.textSplitLoad {
display: none;
}
.split {
visibility: hidden;
}
CSSでは動作を実装するテキストが
ページロード時に一瞬表示されてしまわないように
「.textSplitLoad」に対して「display:none;」をつけることが必須となっており、
併せて、親要素（サンプルでは「.split」）に対しては「visibility:hidden;」を入れておきます。
そして実際の動作スクリプトは以下の様になります。
◆SCRIPT
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$(function(){
var setElm = $('.split'),
delaySpeed = 200,
fadeSpeed = 0;
setText = setElm.html();
setElm.css({visibility:'visible'}).children().addBack().contents().each(function(){
var elmThis = $(this);
if (this.nodeType == 3) {
var $this = $(this);
$this.replaceWith($this.text().replace(/(\S)/g, '<span class="textSplitLoad">$&</span>'));
}
});
$(window).load(function(){
splitLength = $('.textSplitLoad').length;
setElm.find('.textSplitLoad').each(function(i){
splitThis = $(this);
splitTxt = splitThis.text();
splitThis.delay(i*(delaySpeed)).css({display:'inline-block',opacity:'0'}).animate({opacity:'1'},fadeSpeed);
});
setTimeout(function(){
setElm.html(setText);
},splitLength*delaySpeed+fadeSpeed);
});
});
</script>
スクリプト開始部分にある設定値の内容は以下の様になっています。
| var setElm = $(‘.split’) | テキストを囲う親要素（クラス無しでもIDでも可） |
|---|---|
| delaySpeed = 200 | 次のテキストが表示されるまでの時間 |
| fadeSpeed = 0 | テキストが表示される際のフェードアニメーション時間 |
これらの設定値を変更することで
テキストの表示時間など微調整が可能になっています。
テキスト表示のスピードは「delaySpeed」で設定するようにしてあるので
ここの値を大きくしたり小さくすることで
表示されるタイミングが早くなったりゆっくりになったりします。
親要素内に太字にする＜strong＞タグや
別の装飾を施したタグが入っていたとしても
1文字ずつ表示することが可能になっています。
例えば下記のようにテキスト中に他のタグが入っていた場合でも、
◆HTML <p class="split"><strong>jQuery</strong>でテキストを<span class="textColor">一文字</span>ずつ読み込むサンプルテキストです。</p>
これを実行させたパターン。
「テキスト装飾付：jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示
スクリプト開始部分の「fadeSpeed」でテキストが表示される際に
フェードアニメーションを設定することが可能になっているので
ここの値を増やすことでタイプライターとは少し違った雰囲気で
テキストを1文字ずつフェードインさせながら表示することが可能になります。
「フェード表示：jQueryでタイプライターのようにテキストを1文字ずつ表示させる方法」サンプルを別枠で表示
タイプライターのようにテキストを1文字ずつ表示させる際にぜひ。。。