snowfall.jquery:紙吹雪を表示するJs



ページ上で指定画像を紙吹雪の様に表示させてみます。

1.CSSの記述例

以下は任意です。

<style type="text/css" media="all">
<!--
body{
	margin: 0;
	padding: 0;
	color:#FFFFFF;
	background-color:#000000;
}
h1{
	text-align:center;
}
#contentArea{
	position:relative;
	margin: 0 auto;
    width:950px;
	height:800px;
	overflow:hidden;
}
-->
</style>

2.読込むJsとJavaScriptの記述例

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="snowfall.jquery.js"></script>
<script type='text/javascript'>
$(document).ready(function(){
	$('#contentArea').snowfall({
	   flakeCount :200, // 枚数
	   flakeIndex : 50, // z-index
	   maxSpeed : 3, // 最大速度
	   minSpeed : 0.6, // 最小速度
	   maxSize  : 14, // 最大サイズ
	   minSize  : 5, // 最小サイズ
	   image : [
	      'images/i01.png',
	      'images/i02.png',
	      'images/i03.png'
	   ]
	});
});
</script>

3.HTMLの記述例

<div id="contentArea">
	<h1>3枚の画像を紙吹雪の様に表示します</h1>
</div><!--/contentArea-->

snowfall.jquery:紙吹雪を表示させるデモページ

ソース元:jQueryとSnowfall Pluginをつかって、桜吹雪にしてみました。 CSS3対応版

利用用途はにぎやかしですかね。