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

    JavaScript

    スクロール中に要素を固定配置できるjQueryプラグイン「makefixed.js」

    makefixed.jsはスクロール中に指定した要素を固定配置させるこ…

  2. ALighter

    JavaScript

    任意のテキストの場所に光を当ててくれるjQueryプラグイン「ALighter」

    ちょっとしたアクセントに使えそうですね。任意のテキストの場所に光を当て…

  3. MediumLightbox

    JavaScript

    Mediumライクな画像ズームを実装できる「MediumLightbox」

    シンプルでエレガントな画像ズーム機能をwebサイトに実装できる「Med…

  4. pagePiling.js

    JavaScript

    垂直にスライドするようなスクロールを実装できるjQueryプラグイン「pagePiling.js」

    pagePiling.jsは垂直にスライドするようなスクロール機能を実…

  5. Vide

    JavaScript

    背景にvideoを表示できるjQueryプラグイン「Vide」

    VideというjQueryプラグインを使えば、Webサイトの背景にvi…

  6. nanoGALLERY

最近の記事

  1. パーソナルパーティション
  2. 200-DGBG020

アーカイブ

PAGE TOP