グリッドレイアウトで配置した文字列を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