前回、1枚の画像のみ対応していますが、配列に画像のファイル名を設定することで、複数枚の画像を表示出来るようにしてみました。
仕組みは単純で、配列に入れたファイル名をランダムに並べ、そこから1番目のファイル名を、表示するところに代入するだけです。
■ 配列をランダムかするJavaScript
// Randam Array Tree-Web custom 2011/10/29
function randArray(_str){
var i = _str.length;
while (i) {
var y = Math.floor(Math.random()*i);
var t = _str[--i];
_str[i] = _str[y];
_str[y] = t;
}
return _str;
}
このソースを、「//random fuction for generating random vals」と書かれているソースの下に追加しました。
randArray(options.image)[0] この部分が、ランダムにした配列の先頭([0])を出力するところです。
■ ソースのカスタマイズ
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 += ";' />";
ここを、以下のように修正しました。
var flakeMarkup = "<img src='"+ randArray(options.image)[0] +"' 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 += ";' />";
■ 呼び出し/設定
<script type="text/javascript">
$(document).snowfall({
flakeCount :100, // 数
flakeIndex : 99999, // スタイルシートのz-indexの値
maxSpeed : 5, // 最大速度
minSpeed : 1, // 最小速度
maxSize : 20, // 最大サイズ
minSize : 1, // 最小サイズ
image : [
'https://lib.tree-web.net/image/snow_crystal_b/snow_crystal01.png',
'https://lib.tree-web.net/image/snow_crystal_b/snow_crystal02.png',
'https://lib.tree-web.net/image/snow_crystal_b/snow_crystal03.png',
'https://lib.tree-web.net/image/snow_crystal_b/snow_crystal04.png',
'https://lib.tree-web.net/image/snow_crystal_b/snow_crystal05.png',
'https://lib.tree-web.net/image/snow_crystal_b/snow_crystal06.png',
'https://lib.tree-web.net/image/snow_crystal_b/snow_crystal07.png',
'https://lib.tree-web.net/image/snow_crystal_b/snow_crystal08.png',
'https://lib.tree-web.net/image/snow_crystal_b/snow_crystal09.png'
]
});
</script>
■ DEMO
百聞は一見にしかず。ともいいますし、一度デモサイトを見ていただければと思います。HTMLソースやJavaScriptのソースを見ていただければ、よりわかりやすいかと思います。画像は、変化がわかりやすいように色を変えています。
DEMO
■ 画像
このデモで利用した画像は、以下の9枚です。
これはPhotoshopのシェイプで作成しました。また、シェイプは、
WEB WORK KIT様で配布されている、「
雪の結晶のphotoshopカスタムシェイプ素材」を利用しました。
画像は、ダウンロードしてご自由にお使いください。
■ Snowfall PlugiをカスタマイズしたJSだけアクセスしたい場合はこちらをご利用ください。
<script type="text/javascript" src="https://media.tree-web.net/js/snowfall/tw.custom_randimg.js"></script>
※ リダイレクト処理が自動的に行われます。
■ 関連ページ
・
jQueryとSnowfall Pluginをつかって、桜吹雪にしてみました。 CSS3対応版
・
jQueryとSnowfall Pluginで桜をちらせてみました。
■ 関連サイト
・
WEB WORK KIT
※ 2019/01/22 … 全ページSSL(HTTPS)に切り替えた際に、正しく動作しない不具合を修正しました。http:〜 を https:〜へ変更しました。
お尋ねしたいことがあるのですが、例えば背景全体に雪を降らした場合、コンテンツ部分にも雪がかぶさってくると思いますが、コンテンツの上にはかぶらず、背景(画面全体の背景)と同じ階層で降らせることはできるのでしょうか。
z-indexで指定すれば良いのかと思いましたが、よくわかりませんでした。
よろしければ教えていただきたいと思います。
どうぞよろしくお願いいたします。