snowfall.jquery.jsを使ってページ上にて指定画像を紙吹雪の様に表示させる方法をご紹介します。
Contents
ディスプレイ広告
紙吹雪の様に表示させる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アナリティクスタグは流用しないで下さい。