[JS]画像を使わずに、テキストをかわいくサークル状に配置するスクリプト -CircleType

タイトルや見出し、キャッチなどのテキストをかわいくサークル状のパスに沿って配置するjQueryのプラグインを紹介します。

CircleType
CircleType -GitHub

日本語ももちろんサークル状に配置できます。

日本語でもOK!

• CircleTypeのデモ
• CircleTypeの使い方

CircleTypeのデモ

サークル状といってもいろいろバリエーションがあります。

円の上側に配置

円の下側に配置

円状に配置

レスポンシブ対応で、サークル状のパスは表示サイズによって最適化されます。

幅1200pxで表示

表示サイズが小さいと小さい円になります。

幅780pxで表示

CircleTypeの使い方

Step 1: 外部ファイル

jquery.jsと当スクリプト、Lettering.jsを外部ファイルとして記述します。

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/lettering.js"></script>
<script type="text/javascript" src="js/circletype.min.js"></script>

FitText.jsを併用すると、表示サイズに合わせてテキストのサイズを変更することもできます。

Step 2: HTML

HTMLはシンプルで、classまたはidを付与するだけです。

<h2 id="demo1">きなこもちチョコはうまい</h2>

Step 3: JavaScript

jQueryのセレクタでテキストを指定し、スクリプトを実行します。

$('#demo1').circleType({radius: 384});

逆さにする場合は、オプションのdirを加えます。

$('#demo2').circleType({radius: 384, dir:-1});

円状にする場合は、全てのオプションは無しで。

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