桜吹雪をちらせてみました。
古目の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:〜へ変更しました。
var angle = Math.round(Math.random()*360);
flakeMarkup += "-moz-transform:rotate(" + angle + "deg);";
flakeMarkup += "-webkit-transform:rotate(" + angle + "deg);";
flakeMarkup += "transform:rotate(" + angle + "deg);";
ってな感じで、回転させてやるといいですね。