no-image

JavaScript

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

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

jTyper

デモ

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

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

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

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

関連記事

  1. Notyf

    JavaScript

    シンプルでレスポンシブ対応のカッコイイ通知を表示できる「Notyf」

    Notyfはシンプルでレスポンシブに対応したカッコイイ通知を表示させる…

  2. Horizontal Timeline

    JavaScript

    水平方向のタイムラインを実装できる「Horizontal Timeline」

    Horizontal Timelineは水平方向に移動可能なタイムライ…

  3. Stripe.Com Navigation

    JavaScript

    コンテナがアニメーションで可変するナビゲーション「Stripe.Com Navigation」

    ナビゲーションメニューのコンテナがアニメーションで可変するドロップダウ…

  4. Philter

    JavaScript

    CSSのフィルターをコントロールできるjQueryプラグイン「Philter」

    PhilterはCSSのフィルターを簡単にコントロールすることができる…

  5. RefineSlide

    JavaScript

    多数のエフェクトが素敵!レスポンシブ対応のjQueryスライダー「RefineSlide」

    多数のエフェクトがあってレスポンシブWebデザインにも対応しているスラ…

  6. crossfade.js

    JavaScript

    スクロールで画像をクロスフェードできるjQueryプラグイン「crossfade.js」

    crossfade.jsというjQueryプラグインを使えば、スクロー…

最近の記事

  1. ネクスタイム
  2. フォールドオーバーポーチ
  3. 田沢湖
  4. ハクバ シリコンクロス
  5. トライポッドスリーブ

Instagram始めました

Facebookページ

PAGE TOP