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. Switchery

    JavaScript

    チェックボックスをiOS7のようなスタイルにしてくれるjQueryプラグイン「Switchery」

    SwitcheryというjQueryプラグインを使えば、チェックボック…

  2. Navigation

    JavaScript

    コンテンツを押し出してナビゲーションを表示する「Navigation」

    Navigationはコンテンツを押し出すかたちでナビゲーションを表示…

  3. Simple Lightbox
  4. bootstrap-wysihtml5

    JavaScript

    シンプルで美しいWYSIWYGエディタを実装できる「bootstrap-wysihtml5」

    bootstrap-wysihtml5はシンプルでスッキリしたデザイン…

  5. Dropit

    JavaScript

    シンプルでフレキシブルなドロップダウンメニュー「Dropit」

    Dropitはシンプルでフレキシブルなドロップダウンメニューを実装でき…

  6. jQuery Slideout Menu

    JavaScript

    スライドしてメニュー表示できるjQueryプラグイン「jQuery Slideout Menu」

    jQuery Slideout Menuはメニューをスライドして表示さ…

最近の記事

  1. ワンタッチ着脱フィルターキット
  2. Soundcore Ace A1
  3. cheero USB-C PD Charger 60W
  4. DY-S01

アーカイブ

PAGE TOP