no-image

JavaScript

指定したテキストをハイライトとタイピング効果で表示できる「typeLighter.js」

typeLighter.jsは、指定したテキストをハイライトとタイピング効果で表示することができるjQueryプラグインです。タイピング効果だけではなく、テキストが切り替わる時にその部分がハイライトされるので、どこが変わるかわかりやすいのがいいですね。

typeLighter.js

typeLighter.js

デモの画像では、テキストがタイピングされる(切り替わる)部分がハイライトされ、その後にタイピング効果によりテキストが表示されていきます。

ハイライトのスタイリングはJSオプションではなく、CSSクラスによって設定されています。これにより、豊かなスタイリングが可能になります。

使い方もシンプルで分かりやすいのがいいですね。例えば、HTMLのマークアップは、こんな感じで表示したい文章を順番に指定していくだけです。

<span data-wordlist="string 1, string 2, string 3">string 1</span>

また、オプションもいくつか用意されています。hightlightSpeed、typeSpeed、clearDelay、typeDelay、attribute、class、interval、initialDelayといったオプション項目のセッティングが可能です。

デフォルト値は、highlightSpeedが25、typeSpeedが100、clearDelayが350、typeDelayが200、attributeが’data-wordlist’、classがnull、intervalが2500、initialDelayが0。

typeLighter.jsのライセンスはMITになります。

というわけで、ハイライトとタイピング効果を兼ね備えたjQueryプラグイン「typeLighter.js」の紹介でした。

文章をドラッグ&ドロップで移動【iOS 11】選択した文章をドラッグ&ドロップで簡単に移動するやり方前のページ

アクセシブルで軽量なモーダルダイアログを実装できる「Micromodal.js」次のページMicromodal.js

関連記事

  1. reveal-it.js

    JavaScript

    左から右へテキストが美しくフェードイン表示する「reveal-it.js」

    reveal-it.jsはテキストが左から右へかけて徐々にフェードイン…

  2. notie.js

    JavaScript

    クリーンでシンプルな通知を表示できる「notie.js」

    notie.jsはクリーンでシンプルな通知を表示できるJSプラグインで…

  3. Fluidbox

    JavaScript

    シンプルで軽快な動作が素敵なLightbox風のjQueryプラグイン「Fluidbox」

    FluidboxというjQueryプラグインを使えば、シンプルで軽快な…

  4. jLetter

    JavaScript

    テキストを散らばせながら次々と表示させることができるjQueryプラグイン「jLetter」

    シンプルでちょっと目を引かせたいところなんかによさそうだったので使って…

  5. FilmRoll

    JavaScript

    中央に来た項目に焦点を当てるカルーセルを実装できるjQueryプラグイン「FilmRoll」

    FilmRollというjQueryプラグインを使えば中央に来た項目に焦…

  6. jcSlider

    JavaScript

    CSS3を使ったレスポンシブ対応スライダーを実装できるjQueryプラグイン「jcSlider」

    jcSliderは、アニメーションを使用しないスライダーのプラグインで…

最近の記事

  1. サンクラフト ポテトング
  2. iPhone 11 Pro Smart Battery Case(ホワイト)
  3. メイソンピアソン ヘアブラシ
  4. COMOLI ベタシャンCPOシャツ(サックス)

アーカイブ

PAGE TOP