jQueryとSnowfall Pluginで桜をちらせてみました。 : ういすぷの記録帳

桜吹雪をちらせてみました。
古目のPCだと若干、重いかもしれません。

この処理には、JavaScriptライブラリjQueryとそのプラグインSnowfall Pluginを利用しています。
ただし、画像を表示できるようカスタマイズしています。

■ 使い方
はじめに、jQueryとSnowfall Pluginをダウンロードして下さい。
※ jquery-*.*.*.min.jsは、ファイルサイズを小さくしたものです。

jQuery 1.3.2 で動作確認をしています。最新版だと動作しませんでした。古いjQueryは「Downloading jQuery」ページからダウンロードでき、jQuery 1.3.2はこちらのページになります。
※ Ver 1.4でも動作しました。(ダウンロードに失敗して、うまく動作しなかったのが原因でした)



ダウンロードしたファイルを、以下の2行をHEAD内かBODY内に記述して利用できるようにします。

<script type="text/javascript" src="jquery-1.3.2.js"></script>

<script type="text/javascript" src="snowfall.jquery.js"></script>

次に以下の行を、HTMLのできるだけはじめに配置します。BODY直下位に記述するのがいいと思います。

<script type="text/javascript">

$(document).snowfall({

	flakeCount :100,			// 数

	flakeColor :'#ffffff',			// 色

	flakeIndex : 99999,			// スタイルシートのz-indexの値

	maxSpeed : 5,				// 最大速度

	minSpeed : 1,				// 最小速度

	maxSize  : 5,				// 最大サイズ

	minSize  : 1,				// 最小サイズ

});

</script>

私が利用したように、画像を表示させたい場合には、snowfall.jquery.jsを開き、50行目程に記述されている「var flakeMarkup = 〜」のDIVブロック要素部分を調整してください。
DIVブロック要素をIMGタグにすることで、画像を利用することもできます。背景を抜く場合は、フルカラーのPNGを利用するといいと思います。
なお、カスタマイズは私が個人的に行ったものです。

■ サンプル

var flakeMarkup = "<img src='https://lib.tree-web.net/image/sakura_hanabira3.png' 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 += ";' />";

■ Download
桜の花びらをご用意しました。ダウンロードして、ご自由にお使いください。
画像は、32bit PNG形式になっています。
こちらから、桜の花びらもダウンロードできます。


■ DEMO
DEMO


■ 別バージョン
CSS3を利用して改良を加えてみました。
→jQueryとSnowfall Pluginをつかって、桜吹雪にしてみました。 CSS3対応版
# 貼り付けるだけで利用できる、便利なHTMLソースもこちらにあります。
→jQueryのSnowfall Pluginで、複数の画像を利用できるようにしてみました。
# 複数の画像が利用出来るようにカスタマイズした記事です。

ぜひお試しください！


※ 2019/01/22 … 全ページSSL（HTTPS）に切り替えた際に、正しく動作しない不具合を修正しました。http:〜 を https:〜へ変更しました。