JavaScript

snowfall.jquery.jsを使って紙吹雪を表示する方法

  /

snowfall.jquery.jsを使ってページ上にて指定画像を紙吹雪の様に表示させる方法をご紹介します。

Contents
  1. 紙吹雪の様に表示させるCSSの記述
  2. snowfall.jquery.jsを使って紙吹雪を表示するJavaScriptの記述
  3. snowfall.jquery.jsを使って紙吹雪を表示するHTMLの記述
  4. snowfall.jquery：紙吹雪を表示させるデモページ
  5. ソース元：jQueryとSnowfall Pluginをつかって、桜吹雪にしてみました。 CSS3対応版

紙吹雪の様に表示させる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>

snowfall.jquery.jsを使って紙吹雪を表示するJavaScriptの記述

※jquery.min.js（1.9系）とsnowfall.jquery.jsファイルを読み込みます。ページ読込後、$(‘#contentArea’).snowfall()で紙吹雪を表示するエリア（id=”contentArea”）、画像、枚数、速度、サイズ等を設定します。

<script src="https://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>

snowfall.jquery.jsを使って紙吹雪を表示するHTMLの記述

※紙吹雪を表示するエリアid=”contentArea”を用意います。

<div id="contentArea">


<h1>3枚の画像を紙吹雪の様に表示します</h1>


</div>


<!--/contentArea-->

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

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

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

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

利用用途はにぎやかしですかね。季節に応じて、桜が舞う、雪が降る演出も出来そうです。

　
※流用される場合は自己責任でお願いします。
　デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。

snowfall.jquery 紙吹雪
RELATED POST