twitter ■お問い合わせ当サイトへのリンクサイト仕様

現在位置 > LostTechnology > JavaScript > Snow Fall

Snow Fall

このJavaScriptは2001年3月に発売された著書「わたしにもできる動くホームページ」に収録したものです。Internet Explorer 4の頃に作成したものであるため、そのうちjQuery用にしてもっとシンプルな実装で作成するかもしれません。

雪が降るようなものをイメージしたアニメーションを実現するためのDynamicHTML(DOM+JavaScript)です。スクリプトはscriptフォルダにあるものとして記述しています。

Sample

雪をイメージした文字が動いているはずです。

<SCRIPT type="text/javascript" src="script/snowfall.js"></SCRIPT>

ここからスクリプトをファイルに保存して、上記のように<HEAD>~</HEAD>内に記述してスクリプトを読み込ませます。

<BODY onload="SnowFall(30,25,25,50);">

スクリプトは<BODY>のonload属性で実行します。最初のパラメータがオブジェクトの数です。2番目と3番目のパラメータがオブジェクトのサイズ指定で、横・縦の順に指定します。最後のパラメータは処理タイミング(ミリ秒)です。

変数SnowFallObjectにタグを記述することで、降ってくるオブジェクトを変更できます。画像で桜の花びらや落ち葉、羽などを指定するのも効果として悪くありません。

※twitterのウィジェットで使われているwidget.jsと相性が悪かったので、競合しないようにScriptを修正しました。競合する場合は本Scriptを読み込む前に以下のような記述などでjQueryを読み込ませておいてください。jQueryの機能を利用して競合を回避して動作するようになります。