雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造

jQuery

Snowfall jquery plugin

雪が舞うようなヒラヒラ落下する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

loktar00/JQuery-Snowfall
Makes it snow on any web page or specific element. - loktar00/JQuery-Snowfall

■参考
jQuery snowfallで画面に雪を降らせる
ページに雪を降らせよう!『JQuery-Snowfall』の使い方

コメント

  1. […] この部分は雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造を参照しています。浅学の身にはたいへん役立ちました。コードは少し変更してあります。 […]

タイトルとURLをコピーしました