[JS]文字を楽しく見せる、カーブ状に簡単に配置できるスクリプト -Arctext.js

CSS3だけで文字を回転させたりカーブ状のパスに沿わせるのは非常に複雑です。文字を簡単にカーブ状に配置したり、またアニメーションを伴うこともできるjQueryのプラグインを紹介します。

Arctext.js – Curving Text with CSS3 and jQuery

[ad#ad-2]

• Arctext.jsのデモ
• Arctext.jsの使い方

Arctext.jsのデモ

デモでは簡単なスクリプトの記述で、カーブ状のパスに沿って配置させています。
また、Demo 4ではアニメーションも実装されています。

Demo 1: Curve

ゆる～いカーブ。

Demo 2: Direction

反対にも。

Demo 3: No rotation

配置だけサークル状で、文字は正位置。

[ad#ad-2]

Demo 4: Set/animate

アニメーション対応デモ

Demo 4: Set/animate

「Set me」でU字に。

Demo 4: Set/animate

「Animate me」でアニメーション。

Arctext.jsの使い方

Arctext.jsは「Lettering.js」をベースに文字をパスに沿わせて正しく回転させ配置します。
Lettering.jsについては、下記を参考ください。

• HTMLファイルを汚さずに細かい設定でspanを挿入できるスクリプト -Lettering.JS

では、Arctext.jsの使い方を。

外部ファイル

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

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

HTML

HTMLはシンプルで見出し要素(h3)で実装するだけです。

<h3 id="example1">I wanna be curved</h3>

JavaScript

JavaScriptは各デモとともに紹介します。

Demo 1: Curve

$example1.arctext({radius: 300})

Demo 2: Direction

$example2.arctext({radius: 400, dir: -1})

Demo 3: No rotation

$example3.arctext({radius: 500, rotate: false})

Demo 4: Set/animate

$example4.arctext({radius: 300})

Demo 4: Set/animate：「Set me」でU字に

$example4.arctext('set', {
	radius		: 140,
	dir			: -1
});

Demo 4: Set/animate：「Animate me」でアニメーション

$example4.arctext('set', {
	radius		: 300, 
	dir			: -1,
	animation	: {
		speed	: 300,
		easing  : 'ease-out'
	}
});

スクリプトのオプション

オプションではサークルの半径、方向などが簡単に設定できます。

radius

半径

dir

方向

1:両端が下のカーブ、-1:両端が上のカーブ

rotate

文字の回転

fitText

「fitText」を利用