◎ javascriptによるジョークな動きの「fontBomb」を使って、webページ画面内のフォントを吹き飛ばしてみた。

webページ画面内のどこでもクリックすると、その場所に fontBomb が投下、黒丸に白字で"3"と表示され、"2"、"1"とカウントダウンし、爆発してフォントを吹き飛ばす。

説明文や、タイトルなどを含めて、html上のフォントならなんでも吹き飛ぶが、フォント以外の画像などには影響はない。また、fontBomb の投下は何度でも可能。

具体的な使い道はというと、今のところ、人を驚かせるジョーク程度しか思いつかない。または、細かい文字設定のCSSコーディングなどで窮したときのストレス発散用？とか・・・

使い道はともかく、javascriptでこんなこともできる、と認識を新たにしておくこともwebデザイナーにとって必要なことかもしれない。

サンプル

このブログにサンプルを設置するのは難しいので、例によって、このブログ支援用の自分のwebサイトのほうに作っておいた。

[test] javascriptによるジョークな動き「fontBomb」：

http://stluke7.web.fc2.com/test-fontbomb.html

なお、このスクリプトの動作は、WindowsとMacのSafari、Google Chrome、Firefoxで確認した。WindowsのInternet Explorer 9では動かなかった。その他にもうまく動かないブラウザがあるかもしれない。

また、この javascriptは、DOMを操作しているので、CSSに影響してしまう問題がある。使い方によっては、table要素や" float "などの振る舞いがおかしくなる。もしこのjavascriptを使ってなにかしたいと思われる方がいらしたら自己責任でお願いしたい。

fontBomb - Stylishly destroy the web：http://fontbomb.ilex.ca/