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. Section Scroller

    JavaScript

    セクションごとに自動でスクロールしてくれるボタン実装「Section Scroller」

    Section Scrollerは、セクションごとにスムーズにスクロー…

  2. no-image

    JavaScript

    タブやアコーディオンを実装できるjQueryプラグイン「jpix」

    jpixはシンプルなタブやアコーディオンを実装することができるjQue…

  3. Slight Submenu
  4. jquery.xtr

    JavaScript

    クライアントサイドで変換してくれる「jquery.xtr」

    jquery.xtrはページのリフレッシュなしにクライアントアイドでテ…

  5. jquery-calendar

    JavaScript

    レスポンシブ対応でスケジュール管理もできるカレンダー「jquery-calendar」

    jquery-calendarはレスポンシブに対応したスケジュール管理…

  6. spzoom

    JavaScript

    シンプルで使いやすい画像ズームを実装できるjQueryプラグイン「spzoom」

    spzoomはシンプルな操作性で使いやすい画像ズーム機能を実装できるj…

最近の記事

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

アーカイブ

PAGE TOP