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

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

サイトのキャプチャ

CircleType
CircleType -GitHub

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

デモのキャプチャ

日本語でもOK!

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();

top of page

©2017 coliss