今回は使わなかったのですが、今後使う機会があるかもしれないので備忘録としてまとめ。
文字列を扇状に表示する方法です。
画像にしてしまうのが一番簡単そうですが、それができない場合には有効です。
そのスクリプトがこちらの「Arctext.js」です。
公式サイトは下記からご確認ください。
Arctext.js – Curving text with CSS3 and jQuery
https://tympanus.net/Development/Arctext/
使い方は、まず公式の配布ページから、ソースをダウンロードします。
で、ダウンロードしたファイル内にある jquery.arctext.js を任意の場所にアップロードし、HTML の head 要素内で読み込みます。
なお、こちらの実行には jQuery も必要なので、一緒に読み込みます。
コードは下記のとおりです。
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> <script type="text/javascript" src="./jquery.arctext.js"></script>
準備はこれでOK。
あとは実装ですが、まず、装飾したいテキストに任意の ID 名を指定します。
<p id='arc-text'>扇状に表示したいテキスト</p>
そして、任意のタイミングで下記の処理を実行します。
$('#arc-text').arctext({radius: 300});
HTML が読み込み終わったタイミングとかでOKだと思います。
なお、上記の記述では、半径 300px の扇状にテキストをカーブさせています。
もう少し急なカーブを描きたい場合は、数値を大きくしてください。
ほかにもオプションがあり、文字列をカーブさせたいけれど、文字の向きはまっすぐなままにしたい、ということもできます。
$('#arc-text').arctext({radius: 300, rotate: false});
また、今までの指定では、山型のカーブになりましたが、dir: -1 というオプションを追加すると、谷型のカーブを描くようにもできます。
$('#arc-text').arctext({radius: 300, dir: -1});
これらを組み合わせれば、文字列を円状に表示することもできますね。
以上、文字列を扇状に表示するためのスクリプト「Arctext.js」のご紹介でした。
機会があればぜひ使ってみたいと思います。
