指定した文字列を円形に描くjQueryプラグイン「CircleType.js」

「CircleType.js」は通常水平に記される文字列に角度をつけ、円形に表すことのできるjQueryプラグインです。

CircleType.js

CircleType

こういうデザインがとても好きなんですよね。アメコミ系というか、海外古着のTシャツにありそうなデザインというか。上向き、下向きな円形だったり、まるっと円にすることも可能です。

CircleType-demo-1

 

CircleType-demo-2

 

CircleType-demo-3

 

クロスブラウザ対応がされていますが、Lettering.jsというライブラリありきでIE9+、Firefox12+、Opera10.5+、Safari4+、Chrome2+だそうです。

 

それでは「CircleType.js」の実装方法をご紹介します。まずjQuery含む外部ファイルを読み込みます。Lettering.jsも読み込んでください。

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="circletype.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lettering.js/0.6.1/jquery.lettering.min.js"></script>

 

HTMLはこのようにマークアップします。

<h2 id="demo3">This text makes a complete rotation no matter how long it is. </h2>

 

CSSはリンク先で使用されているscreen.cssというファイルをそのまま使わせていただきました。

JavaScriptはこのように実装します。

$('#demo3').circleType();

 

するとこのように作ることが出来ました。

CircleType-sample-1

うんいい感じ。こういうデザインも取り込んでみると面白いかもしれないですね。参考にどうぞ。

 

Home > JavaScript > 指定した文字列を円形に描くjQueryプラグイン「CircleType.js」

Return to page top