Typewriter JSは、タイプライターを使って文字入力するようなエフェクトでテキストを表現することができるJSプラグインです。シンプルで軽量・高速ながらも多彩なオプションによりカスタマイズ性にも優れています。
Typewriter JS
Typewriter JSのデモやダウンロード、使い方などは以下のページから確認できます。
Typewriter JS
デモでは、文字がタイプライターで入力しているかのようなエフェクトで表示されたり削減されたりします。1セットのテキストが表示されたあとは、次のテキストを表示するために一旦削減されます。そして、削減された後に次のテキストが表示される仕組みです。
なので、一つのテキストだけではなくいろんなテキストを次々に表示させていきたい場面にもピッタリです。ちなみに、ループの有効・無効も切り替えできます。
表示させるテキストは、HTMLに直接記述する必要はなく、JS側で「typeString(‘string’)」から設定できます。それと同時に、表示させておく時間や次のテキストを表示するために、現在のテキストをどのくらい削減するかの指定も可能です。
すべて削減する場合は「deleteAll()」を使います。それから、例えば「最後の文字から5文字だけを削減したい」という場合には「deleteChars(5)」というように指定してあげればOKです。
また、Typewriter JSにはオプションもいろいろ用意されています。具体的には、strings、autoStart、cursorClassName、cursor、animateCursor、blinkSpeed、typingSpeed、deleteSpeed、charSpanClassName、wrapperClassName、loop、devModeなどといった項目があります。
各オプションのデフォルト値や詳細に関しては、Typewriter JSのページに詳しく記載されています。
タイプライターのようなテキストエフェクトをjQueryなどに依存することなく、ネイティブJavaScriptで実装したい人は、ぜひ「Typewriter JS」を活用されてみてはいかがですか？
