no-image

JavaScript

テキストリンクをタイピングアニメーションで表示するjQueryプラグイン「jTyper」

jTyperはテキストリンクをタイピングアニメーションで表示できるjQueryプラグインです。シンプルなアニメーションなので煩わしさを感じさせずにユーザーの目を引くことができます。使い方も簡単なので、サクッと気軽に実装できるはず。

jTyper

デモ

デモではテキストリンクがタイピングされているようなアニメーションで表示されます。一つの文が終了すると、そのテキストリンクが消えて次のテキストリンクがタイピングされ始めます。シンプルながらもちょっとした動きを加えることで、思わず注目してしまいますね。

マークアップもかなり分かりやすく、ulのli要素に各リンクとテキストをマークアップしていけばOKです。また、オプションからスピードの調整やタイムアウトの指定も可能になっています。デフォルト値はspeedが100、timeoutが3000になります。

speedはタイピングのスピードで、timeoutは次のリンクをタイピングするまでの待機時間になります。

というわけで、テキストリンクにタイピングアニメーションを加えて表示するjQueryプラグイン「jTyper」の紹介でした。

関連記事

  1. Create a month picker jQuery plugin
  2. Slickhover.js

    JavaScript

    滑らかでスムーズなホバーエフェクトを実装できるjQueryプラグイン「Slickhover.js」

    とても軽量で使いやすいのがいいですね。ホバー時に滑らかでスムーズなエフ…

  3. topbar

    JavaScript

    画面上部に美しいプログレスバーを表示できる「topbar」

    topbarは、ページ読み込み時に画面上部に美しいプログレスバーを表示…

  4. Circliful

    JavaScript

    円グラフで統計情報を伝えたい時に役立つjQueryプラグイン「Circliful」

    CirclifulというjQueryプラグインを使えば、統計情報を伝え…

  5. JavaScript

    フォーム内にあるplaceholderの利便性を高めてくれるjQueryプラグイン「FlowupLa…

    フォームを入力する際にあると便利なのがplaceholderです。しか…

  6. jQuery Responsive Tabs

最近の記事

  1. Olli
  2. 単語帳メーカー(Flashcard Maker App)
  3. 1Password 7
  4. 風に揺れる草

Facebookページ

PAGE TOP