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. flexible-bootstrap-carousel
  2. ssi-modal

    JavaScript

    フレキシブルでパワフルなモーダルウィンドウを実装できる「ssi-modal」

    ssi-modalはカスタマイズ性に優れたフレキシブルでパワフルなモー…

  3. justContext.js

    JavaScript

    シンプルなコンテキストメニューを実装できる「justContext.js」

    justContext.jsはjQueryなどを必要とせずに(ピュア …

  4. jQuery gantt

    JavaScript

    軽量なガントチャートを実装できるjQueryプラグイン「jQuery gantt」

    jQuery ganttは、軽量でシンプルなガントチャートを実装するこ…

  5. no-image

    JavaScript

    さまざまなSVGパターンによるCSSプログレスバー「Bars」

    Barsはさまざまな種類のSVGパターンによるCSSプログレスバーを実…

最近の記事

  1. 蒼龍唐玉堂 特製牛バラ担々麺
  2. サーモンアボカドサラダラップとドリップ
  3. 猿田彦フレンチ
  4. Zarigani Curry 挽肉のカレー ゴーダチーズとピクルスを添えて
  5. ビジネスホテル

アーカイブ

PAGE TOP