テキストを円形、半円形に出来るjQueryのプラグイン「CircleType.js」

公開日：2015/09/28

jQuery プラグイン

テキストを円形、半円形に出来るjQueryのプラグイン「CircleType.js」

CircleType.jsを使えば、テキストを円形や半円形に出来ます！
画像にせずテキストのまま使えるのがとても便利ですよ(ﾟ∀ﾟ)

CircleType.js
http://circletype.labwire.ca/

下記に「CircleType.js」を使用する時の手順を説明します！

「CircleType.js」プラグインの使用方法

ファイル読込

下記から「circletype」と「Lettering.js」をダウンロードします。

1.「circletype」
https://github.com/peterhry/circletype

2.「Lettering.js」
https://github.com/davatron5000/Lettering.js

以下のようにダウンロードしたファイルを読み込みます。

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

HTML

今回は円形、山型の半円、谷型の半円を例として作ってみました。
#circle_1→円形
#circle_2→山型の半円
#circle_3→谷型の半円

<p id="circle_1">Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc.</p>
<p id="circle_2">Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc.</p>
<p id="circle_3">Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc. Ad A Type Inc.</p>

JS

radiusで円の大きさを指定、dir:-1を追加することで谷型になります。

<script type="text/javascript">
$(document).ready(function() {
    $("#circle_1").circleType();//円
	$("#circle_2").circleType({radius: 250});//山型
	$("#circle_3").circleType({radius: 350, dir:-1});//谷型
});
</script>