雪や桜の花びらが画面上に舞う演出は、訪問者の注意を引きつける素晴らしい方法です。
今回は、snowfall.jquery.jsというjQueryプラグインを使用して、このような効果を簡単に実現する方法を紹介します。
紙吹雪に必要なCSSの設定
まず、ページの基本的なデザインを設定します。以下のCSSは紙吹雪の背景を黒にし、テキストの色を白に設定しています。また、紙吹雪を表示するエリア#contentAreaのスタイルも定義しています。必要に応じてこれらのスタイルをカスタマイズできます。
注意: ページのデザインに合わせて、適切な背景色やテキストの色を選択してください。
<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の2つのファイルを読み込む必要があります。そして、ページの読み込みが完了したら、$(‘#contentArea’).snowfall()メソッドを使って紙吹雪の設定を行います。
このメソッドには、使用する画像や紙吹雪の数、速度、サイズなどのオプションを設定できます。例として、3枚の画像を使用して、200枚の紙吹雪を表示する設定を示します。
<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>
紙吹雪を表示するHTMLの実装
紙吹雪を表示するためのエリアをHTMLで設定します。この例では、#contentAreaというIDを持つdiv要素を使用しています。この中に、紙吹雪とともに表示したいコンテンツを配置できます。
<div id="contentArea">
<h1>3枚の画像を紙吹雪の様に表示します</h1>
</div>
<!--/contentArea-->
snowfall.jquery：紙吹雪を表示させるデモページ
snowfall.jquery.jsを使用した紙吹雪のデモページや、オリジナルのソースにアクセスすることができます。以下のデモページを参考にして、紙吹雪の演出のカスタマイズや応用を学ぶことができます。
snowfall.jquery：紙吹雪を表示させるデモページ
ソース元
ソース元：jQueryとSnowfall Pluginをつかって、桜吹雪にしてみました。 CSS3対応版
応用としての季節の演出
この方法は、単に雪を表示するだけでなく、季節やイベントに応じてさまざまな演出を加えることができます。例えば、春には桜の花びら、秋には紅葉、夏には花火など、訪問者の気分を高めるさまざまなエフェクトを取り入れることが可能です。
※流用される場合は自己責任でお願いします。
デモページタグ内のGoogleアナリティクスタグは流用しないで下さい。
