underline.js

JavaScript

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

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

underline.js

デモ

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

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

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

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

underline.js

関連記事

  1. Cloud 9 Carousel

    JavaScript

    サクサク動作する3Dカルーセルを実装できる「Cloud 9 Carousel」

    Cloud 9 Carouselはサクサク動作する3Dカルーセルを実装…

  2. JavaScript

    文字の半分をスタイルすることができるjQueryプラグイン「Splitchar」

    SplitcharというjQueryプラグインを使えば、文字の半分をス…

  3. JavaScript

    jQueryの基本的なセレクターを適当に試してみる

    自分の勉強用としてちょっと適当に試してみました。jQueryの基本のセ…

  4. overhang.jp

    JavaScript

    シンプルでクールな通知バーを実装できるjQueryプラグイン「overhang.jp」

    overhang.jsは、通知バーを実装するためのjQueryプラグイ…

  5. Relocator
  6. Simple jQuery Slider

    JavaScript

    シンプルなナビ付きのスライダーを実装できる「Simple jQuery Slider」

    シンプルなスライダーを実装できる「Simple jQuery Slid…

最近の記事

  1. 田沢湖
  2. ハクバ シリコンクロス
  3. トライポッドスリーブ
  4. レンズペン3 ミニプロとレンズペン ELITE マイクロプロ

Instagram始めました

Facebookページ

PAGE TOP