Typed.js

JavaScript

プログラムを入力するようにタイプするエフェクトを実装できる「Typed.js」

Typed.jsは、プログラムを入力するように文字をタイプしてくれるエフェクトを実装することができるjQueryプラグインです。MacのターミナルやWindowsのコマンドプロンプトのようなデザインが特徴的です。

Typed.js

デモ

デモでは、どこか見覚えのある黒いウィンドウが表示されていて、そこにプログラムを入力するようなタイプエフェクトで文章が表示されていきます。

新しい文章が表示される時は、現在表示されている文章がバックスペースで削減していくような感じで消えていき、その後に新しい文章がタイプされていきます。

サイトの雰囲気にプログラマーっぽさを出したい時にはピッタリのプラグインですね。

使い方に関しても、特に難しい設定などもなくシンプルで手軽に実装できると思います。セッティング可能な項目には、strings、stringsElement、typeSpeed、startDelay、backSpeed、shuffle、backDelay、fadeOut、fadeOutClass、fadeOutDelay、loop、loopCount、showCursor、cursorChar、attr、contentTypeなど、さまざまな項目が用意されています。

表示させたい文章は、stringsに指定していきます。ちなみに、stringsには複数の文章を設定することが可能です。

というわけで、MacのターミナルやWindowsのコマンドプロンプトのような画面に、プログラムを入力するようにタイプするエフェクトを実装できるjQueryプラグイン「Typed.js」のご紹介でした。

Typed.js

関連記事

  1. Stepper.js

    JavaScript

    数値を手軽にアップ・ダウンできるステッパーを実装できる「Stepper.js」

    Stepper.jsは数値入力ボックスでの数値を手軽にアップ・ダウンで…

  2. jQueryプラグインのスライダー集

    JavaScript

    【jQueryプラグイン】素晴らしい機能が満載のスライダー集

    jQueryプラグインには様々な役立つ機能がありますが、中でも人気が高…

  3. Smooth Scroll behavior polyfill
  4. Water Wave Effect jQuery
  5. Picker

    JavaScript

    iOSのようなピッカーを実装できるJSライブラリ「Picker」

    Pickerは、iOSのUIのようなピッカーを実装することができるJS…

  6. jTableScroll

    JavaScript

    ヘッダーとフッターを固定したままスクロール可能なテーブル「jTableScroll」

    jTableScrollはヘッダーとフッターを固定したままスクロール…

最近の記事

  1. USB-2H401BKN
  2. Dyson Pure Cool Me
  3. ルック セレクション
  4. シルキーウインドモバイル

アーカイブ

PAGE TOP