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. no-image

    JavaScript

    背景にSVGによるライン(線)をランダムで生成する「ckLine.js」

    ckLine.jsは背景にSVGによるライン(線)をランダムで生成する…

  2. JavaScript

    ぼかし背景を画像から作成できるjQueryプラグイン「Blurr」

    BlurrというjQueryプラグインを使えば、ぼかし背景を画像から簡…

  3. socialShare.js
  4. no-image

    JavaScript

    テキストに応じてアンダーラインが伸び縮みする「Magic Line Menu」

    Magic Line Menuはナビゲーションメニューのテキストに応じ…

  5. no-image

    JavaScript

    インスタの写真や動画を表示できる軽量なjQueryプラグイン「Instagram Lite」

    Instagram Liteは指定したユーザーのインスタグラムの写真や…

  6. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

最近の記事

  1. VS-543AS
  2. タリーズ 本日のコーヒー
  3. MRW-G1
  4. 桜と太陽

アーカイブ

PAGE TOP