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. ItemSlide.js

    JavaScript

    タッチやスワイプでスライドするカルーセルのjQueryプラグイン「ItemSlide.js」

    ItemSlide.jsはタッチ、スワイプ、スクロールなどでスライドす…

  2. kissui.scrollanim

    JavaScript

    スクロールによる多彩なアニメーションを実装できる「kissui.scrollanim」

    kissui.scrollanimは、CSS3を活用したスクロールによ…

  3. no-image
  4. Gradientify

    JavaScript

    シンプルなCSSグラデーション変化を実装できる「Gradientify」

    GradientifyはシンプルなCSSグラデーション変化を実装するこ…

  5. StickyStack.js

    JavaScript

    パネルにスタッキング効果を実装できるjQueryプラグイン「StickyStack.js」

    StickyStack.jsはパネルにスタッキング効果を実装することが…

最近の記事

  1. クッキー&クリーム ポップコーン
  2. マウイチップス マウイオニオン味
  3. グリーンビーントゥーバー
  4. VS-543AS

アーカイブ

PAGE TOP