Blog

2013.1010

雪を降らせるJavaScript

雪を降らせるスクリプトは結構ありますが、ウインドウリサイズ時に変な動きになったり、
思ったような設定が出来ないこと等がありましたので自作することにしました。
jQuery等のライブラリは必要なく単独で動きます。

ちなみにiPad、iPhone、Androidは動作が重くなるため無効にしております。
どうしても動かしたい場合はsnow.jsの223～225行目を削除してください。

DEMO

ダウンロード

使用にあたっての注意

  1. 再配布はご遠慮くださいませ
  2. 改変は自由にしてくださって構いませんが、最上部にあるコメント部分は削除しないでください。
  3. このスクリプトを使用し、何らかの問題が発生しても一切責任は負いません。
  4. 使用に関しては自己責任でお願いいたします。
  5. ご要望、バグなどございましたらお問合せフォームまで

設置方法1

head要素内にsnow.jsを読み込みます。

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

設置方法2

下記を適当な場所へ記述してください。
※設定は「設定可能オプション」をご覧ください。

var atsnow = new ATSnow({
	classname : 'snow',
	count : 100,
	interval : 40,
	maxSize : 10,
	minSize : 1,
	leftMargin : 10,
	rightMargin : 20,
	bottomMargin : 0,
	maxDistance : 10,
	minDistance : 1
});
atsnow.load();

デザインのカスタマイズ方法

上記classnameで指定したクラス名にCSSを設定します。

.snow {
	position: absolute;
	background: #FFF;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.8);
	-moz-box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.8);
	-webkit-box-shadow: 0px 0px 5px 1px rgba(255, 255, 255, 0.8);
}

設定可能オプション

classname : ‘snow’
雪のclass名です。

count : 100
画面内に表示される雪の数です。

interval : 40
アニメーションが動作する一定間隔の時間です。
(0にすると落下速度は速くなりますが、その分ブラウザに負荷がかかります)

maxSize : 10
一番大きい雪のサイズです。(単位はpx)

minSize : 1
一番小さい雪のサイズです。(単位はpx)

leftMargin : 10
画面左側のマージンです。maxDistance分は最低開けてください。(単位はpx)

rightMargin : 20
画面右側のマージンです。maxSize+maxDistance分は最低開けてください。(単位はpx)

bottomMargin : 0
画面下側のマージンです。(単位はpx)

maxDistance : 10
雪のブレ幅の最大値です。(単位はpx)

minDistance : 1
雪のブレ幅の最少値です。(単位はpx)

Page Top