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」の紹介でした。

関連記事

  1. FREVR

    JavaScript

    シンプルな無限スクロールを実装できるjQueryプラグイン「FREVR」

    FREVRはシンプルで軽量な無限スクロールの機能を実装することができる…

  2. no-image

    JavaScript

    シンプルでパワフルなセレクトボックスを実装できる「SelectPage」

    SelectPageはシンプルながらも高いカスタマイズ性を備えたパワフ…

  3. no-image

    JavaScript

    多彩なパラメーターでモバイルフレンドリーなjQuery Lightboxプラグイン「frydBox」…

    frydBoxは、多彩なパラメーターでカスタマイズ性の高いモバイルフレ…

  4. Bootstrap Carousel Touch Slider with Text Animation
  5. OverlayScrollbars

最近の記事

  1. Dyson Pure Cool Me
  2. ルック セレクション
  3. シルキーウインドモバイル
  4. アリエール パワージェルボール3D

アーカイブ

PAGE TOP