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」を活用されてみてはいかがですか?

LC Micro SliderスタイリッシュなスライドアニメーションがかっこいいjQueryスライダー「LC Micro Slider」前のページ

選択内容によりその下の内容も変化するセレクトボックス「Dependent / Cascading Select List with jQuery Select2」次のページDependent / Cascading Select List with jQuery Select2

関連記事

  1. JavaScript

    ボックス要素からはみ出した分のテキストを「…」に置き換えてくれるjQueryプラグイン「…

    なんとなく使う機会がありそうな感じのjQueryプラグイン「jQuer…

  2. Checkify

    JavaScript

    軽量でカスタマイズ性も高いjQueryバリデーションプラグイン「Checkify」

    Checkifyは軽量でカスタマイズ性も高いバリデーション機能を実装で…

  3. no-image
  4. funnyText.js
  5. jQuery Modal

    JavaScript

    シンプルでレスポンシブなモーダルボックス「jQuery Modal」

    jQuery Modalはシンプルでレスポンシブに対応したモーダルボッ…

  6. markerPen

    JavaScript

    Webページにマーカー機能を実装できるjQueryプラグイン「markerPen」

    markerPenはWebページにマーカーで描ける機能を実装することが…

最近の記事

  1. そそそ 明太クリームそうめん
  2. すしざんまい
  3. 蒼龍唐玉堂 特製牛バラ担々麺
  4. サーモンアボカドサラダラップとドリップ
  5. 猿田彦フレンチ

アーカイブ

PAGE TOP