linkunderline

JavaScript

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

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

linkunderline

デモ1

デモ1

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

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

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

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

  • speed
  • color
  • thickness
  • distance

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

linkunderline

関連記事

  1. Hover Carousel

    JavaScript

    超軽量なホバーカルーセルを実装できる「Hover Carousel」

    Hover Carouselは超軽量なホバーで動作するカルーセルを実装…

  2. jquery.simple-scroll-follow
  3. CurvedText

    JavaScript

    曲線上にテキストを配置できるjQueryプラグイン「CurvedText」

    CurvedTextというjQueryプラグインを使えば、任意の曲線上…

  4. no-image

    JavaScript

    カスタマイズ性の高いjQueryアラート・モーダル・lightboxプラグイン「jAlert」

    jAlertはカスタマイズ性の高いjQueryアラート・モーダル・li…

  5. SimpleCalculadora

    JavaScript

    シンプルでカスタマイズもできる電卓「SimpleCalculadora」

    SimpleCalculadoraはシンプルでCSS、オプションなどで…

  6. JavaScript

    サムネイルをクリックして拡大画像が見れるレスポンシブ対応のjQuery画像ギャラリー「Superbo…

    綺麗に並んだサムネイル画像をクリックして拡大画像を見ることができるjQ…

最近の記事

  1. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ
  2. カメラマングローブ Grip Hot Shot III
  3. 包(つつむ)巾着ポーチ
  4. KMC-80BK

Instagram始めました

Facebookページ

PAGE TOP