[JS]一見普通のアンダーライン、ホバーすると弦を弾くようにアニメーションし、音を奏でる美しいスクリプト -underlineJS

Post on:2015年4月27日

sponsors

アンダーラインのデザインの美しさ、アニメーションの楽しさにこだわったスクリプトを紹介します。

↓はアニメーションGIFなので音はありませんが、実際のデモでは弦楽器のような音を奏でます。
びよ～んとなるのが、かなり気持ちいいです。

underline.jsのこだわり

アンダーラインにはゴーストのピクセルは一切存在せず、すべて完璧なピクセルで形成されています。Retinaディスプレイでも美しいピクセルで表示されます。

ストローク幅は最適化されており、ピリオドの大きさを基準に1/6のサイズです。

アンダーラインの位置は、ベースラインとディセンダの間に黄金比を元にポジションを決定しています。

アンダーラインはディセンダの周りに穴を持っており、文字に交わることなく配置されます。穴の大きさは自動で最適化されます。

デモでは各文字をホバーすると、アンダーラインが弦を弾くようなアニメーションで弦楽器の音を奏でます。

複数のアンダーラインをホバーすると、曲を弾けてしまうかのような楽しいエフェクトです。

このスクリプトはまだ、簡単に実装できるようライブラリ化されていません。コードも少々複雑なので、いつも紹介する時の「使い方」は省略します。
ファイル一式をダウンロードして、コピペすれば普通に動作します。