Typewriter JS

JavaScript

タイプライターっぽいエフェクトでテキストを表現できる「Typewriter JS」

Typewriter JSは、タイプライターを使って文字入力するようなエフェクトでテキストを表現することができる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」を活用されてみてはいかがですか?

関連記事

  1. iziToast

    JavaScript

    エレガントでレスポンシブに対応したトーストを実装できる「iziToast」

    iziToastは、エレガントでレスポンシブに対応した軽量のトーストを…

  2. jquery.matchHeight.js
  3. Tilt Hover Effects

    JavaScript

    ホバーによるチルトエフェクトを実装できる「Tilt Hover Effects」

    指定したアイテムにホバーすることでオシャレなチルトエフェクトを実装する…

  4. ALighter

    JavaScript

    任意のテキストの場所に光を当ててくれるjQueryプラグイン「ALighter」

    ちょっとしたアクセントに使えそうですね。任意のテキストの場所に光を当て…

  5. BeefUp

    JavaScript

    多彩なカスタマイズができるjQueryアコーディオンプラグイン「BeefUp」

    BeefUpは多彩なカスタマイズができるレスポンシブに対応したjQue…

  6. no-image

    JavaScript

    スタイリッシュで美しいイメージスライダー「Gliding Gallery」

    Gliding Galleryはスタイリッシュで美しいシンプルなイメー…

最近の記事

  1. s9+
  2. SRS-LSR200
  3. QC30
  4. リンツ リンドール

アーカイブ

PAGE TOP