no-image

JavaScript

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

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

jTyper

デモ

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

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

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

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

no-imageタッチフレンドリーでモバイルでも快適に動作する「simplelightbox」前のページ

レスポンシブ対応のシンプルなポップアップ・ダイアログを実装できる「simpleDialog」次のページsimpleDialog

関連記事

  1. GridTab

    JavaScript

    グリッドベースのレスポンシブなタブを実装できるjQueryプラグイン「GridTab」

    GridTabはグリッドベースによるレスポンシブに対応したタブを実装す…

  2. JQuery-SnakeGallery

    JavaScript

    ホバーした方向へエフェクトが追従してくる「JQuery-SnakeGallery」

    JQuery-SnakeGalleryは、ホバーした方向へエフェクトが…

  3. rpage

    JavaScript

    Bootstrapを使ったレスポンシブなページネーション「rpage」

    rpageはBootstrapを使ったレスポンシブに対応したページネー…

  4. VintageTxt

    JavaScript

    タイピングしているような効果を実装できるjQueryプラグイン「VintageTxt」

    VintageTxtというjQueryプラグインを使えば、文字をタイピ…

  5. no-image

    JavaScript

    レスポンシブ対応でモバイルフレンドリーなjQueryデートピッカー・タイムピッカー「pickadat…

    pickadateはレスポンシブに対応したモバイルフレンドリーなデート…

  6. CoutUpCircle

    JavaScript

    カウントアップしてくれるjQueryプラグイン「CoutUpCircle」

    CoutUpCircleは目標に指定した数までカウントアップしてくれる…

最近の記事

  1. SV-S251
  2. スラウェシ トラジャ
  3. 梅
  4. CAR-HLD12BK

アーカイブ

PAGE TOP