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

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

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

デモのアニメーション

underline.js -GitHub

underline.jsのこだわり

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

サイトのキャプチャ

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

サイトのキャプチャ

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

サイトのキャプチャ

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

サイトのキャプチャ

underline.jsのデモ

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

デモのキャプチャ

デモページ

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

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

top of page

©2017 coliss