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

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

サイトのキャプチャ

Arctext.js – Curving Text with CSS3 and jQuery

Arctext.jsのデモ

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

デモのキャプチャ

Demo 1: Curve

ゆる~いカーブ。

デモのキャプチャ

Demo 2: Direction

反対にも。

デモのキャプチャ

Demo 3: No rotation

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

デモのキャプチャ

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については、下記を参考ください。

では、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」を利用

top of page

©2017 coliss