文字を円に沿って配置するjQueryプラグイン『CircleType.js』

文字を円に沿って配置するjQueryプラグイン”CircleType.js”をGUIで試せるサンプルを作ってみました。ニョキニョキ動いて面白いです。

“CircleType.js”はIE9以上に加えモダンブラウザ対応なので使いやすく、Google Fonts+CSS3の組み合わせで、かなり凝った表現も可能になります。プラグインは2.7kbと軽量で導入も簡単でした。

動作サンプル

動作サンプルを見てもらえば一目瞭然です。

サンプルではGoogle Fontsで”Prosto One”を指定していますが日本語も通りますが、でも欧文フォントの方がキマリそうではあります。

導入における注意点は、”CircleType.js”の他に”Lettering.js”が必要。公式サイトにリンクがあります。対応ブラウザの詳細は以下にようになります。

サンプルでは実装していませんがレスポンシブにも対応しています。その場合、ウィンドウサイズを可変しても文字サイズはそのままなので、回り込み量が増えます。

回り込み量が増えてしまうとデザインに影響がある場合は、別に”FitText.js”も追加することで文字サイズも可変します。

詳しくは公式ページにレスポンシブのサンプルがあります。

Google Fontsと一緒に使えば、ブログのロゴでも十分通用しそうです。