【jQuery】snowfallプラグインで複数画像対応

画面に雪を降らせることができる、JQueryプラグイン「JQuery-Snowfall」は、
簡単設置ができるが、デフォルトでは降らせる画像を複数設定できない。
羽を降らせる演出を行うために、複数の種類の羽画像を用いるためのカスタマイズを行った

#使用するプラグイン
####github
https://github.com/loktar00/JQuery-Snowfall
####詳しい説明
http://www.north-geek.com/entry/jquery-snow

#カスタマイズ
2011年にすでに詳しい方法が紹介されている。参考にさせていただきました。
https://wispblog.tree-web.net/data/1/page_1_1951.html

##手段は参考サイトと同じ
#####やりたいこと
呼び出し側のimageオプションに、複数のパスを記述できるようにし、その複数画像をランダムに配置する。
###ランダムな数値を呼び出す関数設置（参考そのまま）

// 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」と書かれているソースの下

という表記でしたが、プラグインが新しくなったのか、その箇所は消えていたので、
// Snow flake object　の上に配置しました。（123行目あたり）

###プログラム修正

if(options.image){
                    flakeMarkup = document.createElement("img");
                    flakeMarkup.src = options.image; //←この行
                }else{
                    flakeMarkup = document.createElement("div");
                    $(flakeMarkup).css({'background' : options.flakeColor});
                }

flakeMarkup.src = options.image;　を編集します。

if(options.image){
                    flakeMarkup = document.createElement("img");
                    flakeMarkup.src = randArray(options.image)[0];
                }else{
                    flakeMarkup = document.createElement("div");
                    $(flakeMarkup).css({'background' : options.flakeColor});
                }

###呼び出し/設定

<script type='text/javascript'>
    $(document).ready(function () {
        $(document).snowfall({
            image : [
                '/sp/common/images/hane.png',
                '/sp/common/images/hane2.png',
                '/sp/common/images/hane3.png',
                '/sp/common/images/hane4.png'
            ],
            flakeCount: 35,
            maxSpeed: 2,
            minSpeed: 1,
            maxSize: 150,
            minSize: 80,
            shadow : false
        });
    });
</script>

###まとめ
参考にさせていただいたサイトをただ参考にしただけですが、
汎用性のある使いやすいプラグインなので、これからも要所で使えればと思います。
iOS13 アンドロイド端末でも問題なく動作しました。