Illustratorで作成したような曲線に沿った文字が作りたい！でも一文字ずつCSSのrotate()を使って設定するのは面倒……そんな時はjQueryのプラグイン「Arctext.js」を使って文字を円形にしてみましょう！
Arctext.jsはこちらからダウンロードできます。ダウンロード
今回は画像の上に円形にした円形にした文字を配置してみました。
↓以下が実際のソースサンプルです。
▼JavaScript
$(function () {
$('#arc_text').arctext({radius: 80});
$('#arc_lower').arctext({radius: 80, dir: -1});
});
▼HTML
<div id="main">
<img src="cafe.jpg" alt="cafe">
<p id='arc_text'>CAFE OPEN</p>
<p id='arc_lower'>0000/00/00</p>
</div>
今回、参考にさせていただいたのは、
『【JavaScript】文字列を扇状に表示するためのスクリプト「Arctext.js」』さんです。
ありがとうございます。
