underline.js

JavaScript

遊び心あるアニメーションと美しさを追求したアンダーライン「underline.js」

underline.jsはアニメーションが付いた美しいアンダーラインを描くテキストを実装することができるJSライブラリです。アンダーラインにマウスオーバーして上下に動かすとギターの弦を弾いたような素敵なアニメーションが行われます。

underline.js

デモ

テキストに引かれたアンダーラインがビヨ〜ンと動くのでとても楽しいですね。

また、アンダーラインはアニメーションだけではなく、美しさにもこだわっているのが特徴です。

ゴーストピクセルがなかったり、Retinaディスプレイでも美しく表示されるようになっています。

他にもストローク幅の最適化や黄金比の活用、「j」や「g」といった下に長い文字がアンダーラインと重ならないようにするための工夫(ディセンダ周りに穴を設ける)など、細部まで美しさを追求しています。

underline.js

関連記事

  1. jQuery Inline Footnotes

    JavaScript

    ホバーで脚注を表示できる「jQuery Inline Footnotes」

    jQuery Inline Footnotesはホバーすることで脚注の…

  2. jQueryでウィンドウサイズによって処理を変える

    JavaScript

    jQueryのbindメソッドとliveメソッドの簡単な違いや使い方

    bindとliveの違いがちょっとわかりずらかったのでまとめてみました…

  3. TabbedContent
  4. no-image
  5. jQuery Panelize Plugin
  6. emotion-ratings

    JavaScript

    絵文字を使ったレーティング機能を実装できる「emotion-ratings」

    emotion-ratingsは絵文字を使ったレーティング機能を実装で…

最近の記事

  1. RICOH THETA SC2
  2. 簡易アクセス
  3. SOUNDLINK MINI II Special Edition

アーカイブ

PAGE TOP