雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造します。
Versionは1.7.4です。(だと思います^^;)
デモサイト
http://loktar00.github.io/JQuery-Snowfall/
通常の設置
$('#section').snowfall({
image :"images/flake.png",
minSize:10,
maxSize:32
});
snowfall.jquery.js 140行目
flakeMarkup.src = options.image;
この部分を
flakeMarkup.src = options.image[random(0,options.image.length-1)];
に変更
改造後
if(options.image){
fakeMarkup = document.createElement("img");
flakeMarkup.src = options.image[random(0,options.image.length-1)];
}else{
...
これで複数画像が表示できます。
改造後の設置
$('#section').snowfall({
image : [
"images/flake1.png",
"images/flake2.png",
"images/flake3.png",
"images/flake4.png"
],
minSize: 10,
maxSize:32
});
とりあえず、全体のソースを追ってるわけではないので自己責任でよろしく。
Snowfall jquery plugin
GitHub - loktar00/JQuery-Snowfall: Makes it snow on any web page or specific element.
Makes it snow on any web page or specific element. - loktar00/JQuery-Snowfall
■参考
jQuery snowfallで画面に雪を降らせる
ページに雪を降らせよう!『JQuery-Snowfall』の使い方
コメント
[…] この部分は雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造を参照しています。浅学の身にはたいへん役立ちました。コードは少し変更してあります。 […]