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

Chameleon.js画像を元に自動でコンテンツに色付けしたりカラーコードを取得したりできる「Chameleon.js」前のページ

フルスクリーンに最適なナビゲーションメニュー「Fullscrenn-Menu-Jquery-Plugin」次のページno-image

関連記事

  1. Nivo Zoom

    JavaScript

    Lightbox風に画像をズームして表示させるjQueryプラグイン「Nivo Zoom」

    Lightbox風に画像をズームして表示させるjQueryプラグイン「…

  2. Dependent Dropdown

    JavaScript

    ネストされたセレクトボックスを実装できる「Dependent Dropdown」

    Dependent Dropdownはネストされたセレクトボックスを実…

  3. respontent

    JavaScript

    様々なコンテンツをレスポンシブにしてくれるjQueryプラグイン「respontent」

    respontentというjQueryプラグインを使えば、画像・You…

  4. gliojs

    JavaScript

    viewportから離れた時にイベントをトリガーしてくれる「gliojs」

    gliojsは、ページを閲覧している時にマウスがviewport(表示…

  5. Jquery Tab Plugin

    JavaScript

    シンプルで見やすいタブパネルを実装できる「Jquery Tab Plugin」

    Jquery Tab Pluginはシンプルで見やすく、そして操作しや…

最近の記事

  1. 成城石井 フレンチロースト
  2. COMOLI カシミアシルクニットパーカ
  3. 橋
  4. 梅と久保田城
  5. マワマット26

アーカイブ

PAGE TOP