linkunderline

JavaScript

テキストリンクにアンダーラインのアニメーションを実装できる「linkunderline」

linkunderlineは、テキストリンクにアンダーラインを引くアニメーションを実装することができるjQueryプラグインです。テキストへのホバー時に、さりげないアニメーションでアンダーラインが引かれます。ちょっとしたアクセントを加えたい時によさそうですね。

linkunderline

デモ1

デモ1

デモではテキストへホバーすると、スーッとシンプルにアンダーラインが引かれます。アンダーラインは、真ん中から左右に伸びるように引かれます。

ユーザーが現在どこにカーソルを合わせているのかを明確に把握しやすくなりますね。アニメーションがシンプルなので、ホバー時のアクションを主張しすぎる心配もありません。

さりげなく、そして美しい控えめなホバーエフェクトを実装したい人は有力な選択肢の一つになるのではないでしょうか?

ちなみに、どちらのデモもマークアップ自体は変わりませんが、オプションによるセッティングが異なります。デモ2はデモ1に比べるとアニメーションのスピードが遅く、カラーも変更されています。

  • speed
  • color
  • thickness
  • distance

基本的なアニメーションは変わりませんが、スピードやカラーなどちょっとした部分はオプションを用いることで簡単に変更できます。

linkunderline

関連記事

  1. Tippy.js

    JavaScript

    軽量ながらも多彩なツールチップを実装できるJSライブラリ「Tippy.js」

    Tippy.jsは軽量でありながらも多彩なツールチップを実装することが…

  2. evol-colorpicker

    JavaScript

    マイクロソフト オフィス2010のようなカラーピッカー「evol-colorpicker」

    evol-colorpickerは、マイクロソフト オフィス2010の…

  3. Bricklayer

    JavaScript

    軽量なグリッドレイアウトを実装できる「Bricklayer」

    Bricklayerは軽量なグリッドレイアウトを実装することができるラ…

  4. notifier

    JavaScript

    Webサイトにシンプルな通知を表示させるjQueryプラグイン「notifier」

    notifierはWebサイトにシンプルな通知を表示させることができる…

  5. Crosscover

    JavaScript

    多彩なアニメーションがいい!シンプルで使いやすいjQueryイメージカルーセル「Crosscover…

    Crosscoverはシンプルで多彩なアニメーションが魅力的なイメージ…

最近の記事

  1. Anker PowerWave 10 Pad & Stand セット
  2. ミノン メン 薬用全身シャンプー

アーカイブ

PAGE TOP