on:2015年4月27日sponsorsアンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。~んとなるのが、かなり気持ちいいです。-GitHubunderline.jsのこだわりunderline.jsのデモunderline.jsのこだわりアンダーラインにはゴーストのピクセルは一切存在せず、すべて完璧なピクセルで形成されています。Retinaディスプレイでも美しいピクセルで表示されます。ストローク幅は最適化されており、ピリオドの大きさを基準に1/6のサイズです。アンダーラインの位置は、ベースラインとディセンダの間に黄金比を元にポジションを決定しています。アンダーラインはディセンダの周りに穴を持っており、文字に交わることなく配置されます。穴の大きさは自動で最適化されます。underline.jsのデモデモでは各文字をホバーすると、アンダーラインが弦を弾くようなアニメーションで弦楽器の音を奏でます。デモページ複数のアンダーラインをホバーすると、曲を弾けてしまうかのような楽しいエフェクトです。このスクリプトはまだ、簡単に実装できるようライブラリ化されていません。コードも少々複雑なので、いつも紹介する時の「使い方」は省略します。ファイル一式をダウンロードして、コピペすれば普通に動作します。