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

    複数カラムをレスポンシブに対応させるjQueryプラグイン「jquery.columns」

    複数あるカラムをレスポンシブに対応させるためのjQueryプラグイン「…

  2. t-scroll

    JavaScript

    アニメーションとともにアイテムが一つずつ現れる「t-scroll」

    t-scrollはアニメーションとともにアイテムを一つずつ表示させるこ…

  3. no-image

    JavaScript

    背景にスクロールエフェクトを実装する「Physics-Based Background Scroll…

    背景に美しいスクロールエフェクトを実装する「Physics-Based…

  4. Multipicker

    JavaScript

    要素を選択するときに直感的な操作を実現する「Multipicker」

    Multipickerは、日付や曜日、番号、その他さまざまな要素を選択…

  5. dndod

    JavaScript

    依存性のないシンプルで簡単なモーダルライブラリ「dndod」

    dndodはjQueryなどへの依存性のないシンプルで簡単なJavaS…

  6. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

最近の記事

  1. スターバックス ハウスブレンド
  2. Anker PowerHouse 100
  3. ミニミニ温度計(シルバー)

アーカイブ

PAGE TOP