雪を降らせるJavaScriptを利用してWEBサイトに桜を降らせてみた

公開日：2015/03/27

JavaScript 桜

東北にも桜の季節が近づいてきましたね。
私は大河原の「一目千本桜」が好きで毎年見に行ってます！

他に東北の代表的な桜まつりは「お花見の季節！東北六県の代表的な桜まつりをピックアップ！」
で紹介してるので、是非、チェックしてみてくださいね！

今回は桜もそろそろ咲く時期なので雪を降らせるJavaScriptを利用して
WEBサイトに桜を降らせてみました。
下記のスクリプトを利用しております。
jQueryが不要でとても簡単に導入することができます。

雪を降らせるJavaScript

下記の設定では雪を桜の色に変更し、花びらのようにスタイルを調整してみました。

WEBサイトに桜を降らせる

下記のページから「snow.js」をダウンロードします。

雪を降らせるJavaScript

ファイル読込

ダウンロードした「snow.js」を読み込みます。

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

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

JS

下記の設定で桜で使用するclass名や数、時間、大きさなどを設定してます。

<script type="text/javascript">
var atsnow = new ATSnow({
	classname : 'sakura',
	count : 50,
	interval : 60,
	maxSize : 5,
	minSize : 1,
	leftMargin : 10,
	rightMargin : 20,
	bottomMargin : 0,
	maxDistance : 10,
	minDistance : 1
});
atsnow.load();
</script>

var atsnow = new ATSnow({

classname : 'sakura',

count : 50,

interval : 60,

maxSize : 5,

minSize : 1,

leftMargin : 10,

rightMargin : 20,

bottomMargin : 0,

maxDistance : 10,

minDistance : 1

});

atsnow.load();

</script>

CSS

桜に使用する色やスタイルを設定します。

<style type="text/css">
.sakura {
	position: absolute;
	background: #FCC;
	-webkit-border-radius: 3px 0 3px 0;
	-moz-border-radius: 3px 0 3px 0;
	border-radius: 3px 0 3px 0;
	-webkit-box-shadow: 0px 0px 5px 1px rgba(255, 204, 204, 0.5);
	-moz-box-shadow: 0px 0px 5px 1px rgba(255, 204, 204, 0.5);
	box-shadow: 0px 0px 5px 1px rgba(255, 204, 204, 0.5);
}
</style>