underline.jsはアニメーションが付いた美しいアンダーラインを描くテキストを実装することができるJSライブラリです。アンダーラインにマウスオーバーして上下に動かすとギターの弦を弾いたような素敵なアニメーションが行われます。
underline.js
underline.jsのデモは以下になります。
テキストに引かれたアンダーラインがビヨ〜ンと動くのでとても楽しいですね。
また、アンダーラインはアニメーションだけではなく、美しさにもこだわっているのが特徴です。
ゴーストピクセルがなかったり、Retinaディスプレイでも美しく表示されるようになっています。
他にもストローク幅の最適化や黄金比の活用、「j」や「g」といった下に長い文字がアンダーラインと重ならないようにするための工夫（ディセンダ周りに穴を設ける）など、細部まで美しさを追求しています。
遊び心あるアニメーションと美しさにこだわったアンダーラインを実装したい方は、ぜひチェックされてみてはいかがでしょうか？
