曲線文字を描く

文字列をアーチ状に描く

2021年4月29日

グリッドレイアウトで配置した文字列をjQueryを使って作られたスクリプト Arctext.js でアーチ状に配置する

前回作ったものにフォントをひとつ追加し、ふたつの文字列を追加したフォントに置き換えて、それをアーチ状に配置してみた。静止的デザインがざわざわと動き出す抑揚感を感じるデザインへと変貌した。

Arctext.js を使うシーンはこれまでは無かったが、こういうポスターデザインでは抜群の効果を発揮する。

使い方は Arctext.js をダウンロードする。<head>内に以下 jquery と Arctext.js を読み込む指定をする。

<script src="https://code.jquery.com/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="./jquery.arctext.js" type="text/javascript"></script>

</body>直前に次のように radius(半径)の数値を指定することで好みのアーチが完成する。

<script type="text/javascript">
   $('#example1').arctext({radius: 280});
   $('#example2').arctext({radius: 900, dir: -1});
</script>
2030
WORLD

TOKYO BIG APPLE

JULY 7 - 8 / PM 19:00

ROCK MUSIC

FESTIVAL

the prev page Get back to