jQuery Snowfallプラグインの紹介

jQuery Snowfallは雪などの画像を、画面全体や指定したボックス内に降らすものである。
Jquery Snowfall Plugin 1.4からファイルをダウンロードして更に解凍してsnowfall.jquery.jsを取り出す。

1.カスタマイズ

このsnowfall.jquery.jsをこのままつかうとHTMLでSnowfallを呼び出す時に画像を指定することができないため、次のカスタマイズを行う。

①「var flakeMarkup = ～」の部分をカスタマイズする。

var flakeMarkup = $(document.createElement("div"))
  .attr({'class': 'snowfall-flakes', 'id' : 'flake-' + this.id})
  .css({'width' : this.size, 'height' : this.size, 'background' : options.flakeColor,
        'position' : 'absolute', 'top' : this.y, 'left' : this.x, 'fontSize' : 0,
        'zIndex' : options.flakeIndex});

上記を消して、次と置き換える

var flakeMarkup = "<img src='"+ randArray(options.image)[0] +"' id='flake-" + this.id;
		flakeMarkup += "' style='width: " + this.size + "px; height: " + this.size + "px;";
		flakeMarkup += "; position: absolute; top: " + this.y + "px; left:" + this.x;
		flakeMarkup += "px; font-size: 0px; z-index: " + options.flakeIndex;
		flakeMarkup += ";' />";

②randArray関数の追加 次のコードを追加する。

	// Randam Array Tree-Web custom 2011/10/29
	function randArray(_str){
		var i = _str.length;
		while (i) {
			var y = Math.floor(Math.random()*i);
      var t = _str[--i];
		  _str[i] = _str[y];
			_str[y] = t;
		}
		return _str;
	}

2.使い方 HTMLの中から次のようにして、snowfallを呼び出す。

<!DOCTYPE html>
<html lang="ja">
<HEAD>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<meta charset="UTF-8"> 
<meta http-equiv="Content-Script-type" content="text/javascript">
<script type="text/javascript" src="http://samplesub.sakuraweb.com/js/jquery.min.js"></script>
<script type="text/javascript" src="http://samplesub.sakuraweb.com/js/snowfall.jquery.js"></script>
<TITLE>sakura</TITLE>
<style type="text/css">
#leafContainer {
     top:0;
     position:relative;
     width:800px;
     height:600px;
     background-color: #ccffff;
}
</style>
</HEAD>
<body>
<script type="text/javascript">
jQuery(function(){
  jQuery('#leafContainer').snowfall({
		flakeCount :10,		// 数
		flakeColor :'#ffffff',	// 色
		flakeIndex : 99999,		// スタイルシートのz-indexの値
		maxSpeed : 5,		// 最大速度
		minSpeed : 1,		// 最小速度
		maxSize  : 25,		// 最大サイズ
		minSize  : 20,		// 最小サイズ
		image : ['http://www/snow/snow-1.png',
             　　             'http://www/snow/snow-2.png'
            ]
	});
});
</script>
<div id="leafContainer">
</div>
</body>
</HTML>

サンプルは「季節の便り」の「春」および「冬」を参照のこと。