linkunderline

JavaScript

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

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

linkunderline

デモ1

デモ1

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

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

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

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

  • speed
  • color
  • thickness
  • distance

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

linkunderline

AJAX Live Search入力された結果を検索表示するjQueryプラグイン・PHP検索フォーム「AJAX Live Search」前のページ

シンプルでフレキシブルなローディングマスクプラグイン「busy-load」次のページbusy-load

最近の記事

  1. CIO Mate Magnet Stand
  2. 抹茶クリームドーナツ
  3. FAST
  4. クリスマスブレンド
  5. ホワイトチョコマカダミアドーナツ
PAGE TOP