テキストをタイプライター風に表示させるスクリプト

テキストをタイプライター風に表示させるスクリプト

スポンサーリンク

スポンサーリンク

j-Queryを使った簡単なスクリプトとCSSだけで、テキストをタイプライター風に表示させる方法を説明します。

使い道としては、閲覧ユーザーのファーストビュー時に興味を引きたいテキストに実装させておけば、ほぼ100%視線は釘付けになるかと思います。(多分…)

デモは以下をご覧ください。

デモ画面

タイプライター風に表示させるために

まずはj-Queryを読み込ませます。

以下のコードを<head>内、あるいは<footer>内にコピペしてください。

※j-Queryは上記バージョン(1.9.1)でのみ動作を確認しています。他のバージョンでは動作しない可能性があります。

続いてスクリプトを読み込ませます。

以下のコードを<head>内、あるいは<footer>内にコピペしてください。

4行目のdelaySpeedの数値が、大きければ表示される速度も遅くなり、小さければ速くなります。

5行目のfadeSpeedの数値を大きくするに従い、文字が流れるように表示されるようになります。

最後に以下のCSSを読み込ませます。

このとき、先ほどのスクリプトの3行目に当たるクラス名と、13、17、18行目に当たるクラス名とを、CSSに追加するそれぞれのクラス名と関連付けさせるのを忘れないでください。

あとは、タイプライター風に表示させたい箇所に、スクリプトの3行目にて指定したクラスを付与するだけです。例えばデモ画面では以下のようなHTMLとなります。

まとめ

今回の、テキストをタイプライター風に表示させる方法については、j-Queryのおかげでスクリプトも複雑なものではなく、CSSに至っては僅か数行で実装することが可能でした。

活用する機会はあまりないスクリプトかもしれませんが、このような表示を必要としている方のお役に立てれば幸いです。

ここまでお読みいただきまして、誠にありがとうございました。

スポンサーリンク

スポンサーリンク

スポンサーリンク