あなたのウェブサイトにも,雪の降るページを

京都コンピュータ学院のウェブサイトに雪を降らせるコードを実装しました。
ページの右上の検索ボックスの横にある小さい雪だるまの絵をクリックすると雪が降り始めます。もう一度押すと雪が止みます。

これは,JavaScriptでかかれています。●の文字をいろんな大きさで色々な場所に配置して,ちょっとずつ下に移動させています。(●は画像や円を描いているわけではなく,●の文字そのものです。)

自由にお使い下さい。

といっても,これは京都コンピュータ学院のウェブサイト用に最適化されていますので,こちらに,再利用しやすくしたバージョンをおいておきました。
こちらは雪が●と*が混ざったバージョンに変更されています。
実行例:雪のサンプルページ(雪が●と*の両方)。

最低限のHTMLの場合:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="kcg-snow.js"></script>
</head>
<body onload="onload_snow()" bgcolor="#000000" text="#ffffff">
<div style="height:100%">

</div>
</body>
</html>

とりあえず使うことが出来ます。
これで あなたのウェブサイトにも,雪の降るページを。

カスタマイズの例:
kcg-snow.js
の中の
count = 30;
は同時に出る雪の個数です。40とか80とかにすれば,雪の量を増やすことが出来ます。
‘●’ とか ‘*’ は雪の形です。ただの文字なので,好きな文字に書き換えれば,その文字が降ってきます。これは,HTMLなので,'<img src="snow.gif" alt="">’ とかにして画像を入れることも出来ます。

私は,雪を降らすプログラムがとても好きです。
子供のころによく書いたプログラムも雪を降らせるプログラムでした。
その時 使っていたコンピュータは父親のCASIO FP-1100。言語はC82-BASICでした。(電源入れると,C82-BASICの入力画面になった。)
CとはカシオのCで,82は1982年のことだったと思う。
すさまじく遅かったので,雪のようにゆったり動くプログラムとかは最適でした。その時も,雪は画像ではなくて,文字でした。雪を表している文字は*を使用していました。
この手のプログラムを作るのは,当時も楽しかったですし,今でも楽しいです。

CASIO FP-1100は,現在,京都コンピュータ学院京都駅前校の1階に展示されていますね。

comments

コメントを残す