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. Changing Background Color while scrolling
  2. Parallax Slider with jQuery
  3. Huebee

    JavaScript

    オシャレなカラーピッカーを手軽に表示させれる「Huebee」

    Huebeeはシンプルでオシャレなカラーピッカーを手軽に表示させること…

  4. no-image

    JavaScript

    多彩な方向に表示できるツールチップ「jq-tooltip」

    jq-tooltipは多彩な方向に表示可能なツールチップを実装できるj…

  5. no-image

    JavaScript

    アクセシブルなビフォーアフター画像を実装できる「BeerSlider」

    BeerSliderはVanilla JSによるアクセシブルなビフォー…

  6. no-image

    JavaScript

    手軽にパララックス効果を実装できるシンプル・軽量な「simpleParallax」

    simpleParallaxは、手軽にパララックス効果を画像に実装する…

最近の記事

  1. 三菱ブレッドオーブン
  2. 浜離宮恩賜庭園

アーカイブ

PAGE TOP