underline.js

JavaScript

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

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

underline.js

デモ

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

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

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

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

underline.js

関連記事

  1. JavaScript

    フルスクリーンで画像などの要素を表示させることができるJSライブラリ「screenfull.js」

    screenfull.jsは画像などの要素をフルスクリーンで表示させる…

  2. JavaScript

    画像を素敵なアニメーションで次々に表示させるjQueryのイメージギャラリー「Heap Shot」

    とても素敵な画像の見せ方だったのでご紹介します。jQueryプラグイン…

  3. MoveTo

    JavaScript

    軽量なスムーススクロールを実装できるJSライブラリ「MoveTo」

    MoveToは軽量(圧縮版で1KBほど)なスムーススクロールを実装する…

  4. table-dragger

    JavaScript

    ドラッグ&ドロップでテーブルを並べ替えられる「table-dragger」

    table-draggerはドラッグ&ドロップでテーブルの並べ替えを可…

  5. Parallax Slider with jQuery
  6. Shorten

    JavaScript

    長いテキストを自動で短縮してくれるjQueryプラグイン「Shorten」

    Shortenは指定した文字数以上の長いテキストを自動的に短縮してくれ…

最近の記事

  1. NIB2600
  2. Anker PowerPort Atom PD 4
  3. USB-2H401BKN
  4. Dyson Pure Cool Me

アーカイブ

PAGE TOP