作成のきっかけ
ピョンチャン冬季オリンピックでは日本人選手が大活躍し国中が興奮のるつぼと化しました。
凱旋パレードではメダリストが熱い応援に感謝の意を表して車から手を振って声援に応えていました。
中でも仙台での羽生結弦選手のパレードは圧巻で10万を超える参加者があったと報じられています。プロ野球日本シリーズ優勝パレードに見られるような紙吹雪が間断なく降り注いでいました。
一方、冬が近づくと雪景色を背景にした画像が多く見られ、「雪または花びらなどの画像を降らせる方法」の記事が目に留まるようになります。ネット上を 調査すると紙吹雪を降らせる記事が見つからなかったので紙吹雪を降らせる方法に挑戦しました。
合わせて、ウィジェット欄や左右の目次欄には降らせず、本文記事全般あるいは記事の一部にのみ降らせる仕組み、降らせる画像を複数種類にする方法を探求しましたので顛末を公開します。
雪や桜の花びらを降らせるには
インターネットをめぐる現象は日進月歩を重ね日々、進化しています。進歩が速すぎて正しい評価が追い付かずに様々な問題を抱えていますが、それは別の機会に触れることにします。
インターネットを利用して効果的な表現をしたい場合、その技術がおおむね確立されて公開されていることが多いです。その技術を有料あるいは無料で組み込んで使います。
その部分（ツール、行為など）をプラグインと言っています。世界的で強力なソフトウェア開発プロジェクトのための共有ウェブサービスにGitHubがあり、今回はそのプラグインを基本的に使わせていただいています。
この度の試みを実現するには、既存のjQueryライブラリーの導入、その一部改造、呼び出し方法を体得しなければなりません。これらの全体像を理解するにはほぼコピペするだけ！jQueryでWebページに雪（または花びらなどの画像）を降らせる方法などにも目を通してください。
準備するもの
最初に、雪を降らせるためのプラグインファイルをダウンロードします。ダウンロード先は次のURLアドレスです。『Makes it snow on any web page or specific element.』
英語版ですが設定は数字やアルファベットであり、すべて日本語に対応します。
URLにアクセスし、ページの右側にある「Clone or download」をクリックし、jQuery-Snowfall-masterを確保します。一般にはそのなかの縮小タイプであるdistフォルダーを利用しますが、今回は一部を変更するのでsrcフォルダのsnowfall.jquery.jsを使います。
プラグインを改造する
雪が舞うようなヒラヒラ落下する画像のスピードやサイズは随時、変化しますが画像は常に同じです。これを指定した画像のぶんだけ変化するようにSnowfall jquery pluginを複数画像対応に改造します。
この部分は雪が舞うようなヒラヒラ落下するSnowfall jquery pluginを複数画像対応に改造を参照しています。浅学の身にはたいへん役立ちました。コードは少し変更してあります。
Snowfall jquery pluginの138行付近をbeforeからafterに変更します。 変更内容は、画像を配列で指定すればそのなかから、乱数を発生させてひとつを選びます。従来のようにいつも決まった画像を指定した場合でも動作するように配慮されています。
before
if(options.image){
flakeMarkup = document.createElement("img");
flakeMarkup.src = options.image;
}else{
flakeMarkup = document.createElement("div");
$(flakeMarkup).css({'background' : options.flakeColor});
}
after
if(options.image){
flakeMarkup = document.createElement("img");
var yn = Object.prototype.toString.call(options.image) === '[object Array]';
flakeMarkup.src = yn ? options.image[Math.floor(Math.random()*options.image.length)] : options.image; //;2018-05-09
//console.log("flakeMarkup.src", yn, options.image, options.image.length);
}else{
flakeMarkup = document.createElement("div");
$(flakeMarkup).css({'background' : options.flakeColor});
}
紙ふぶき画像を作る
紙ふぶきを降らせるために紙ふぶき画像を作ります。三角形、四角形、星形をそれぞれ4色ずつ12種類を作りました。
画像サイズは呼び出し側設定データで決まるので手ごろなサイズ400×400にしました。形は正方形が原則で、長方形や円形にするには外側を透明色にして実現します。
| ① |
４角形 |
赤 |
0度 |
| ② |
” |
青 |
-30度 |
| ③ |
” |
緑 |
45度 |
| ④ |
” |
黄 |
30度 |
| ⑤ |
星形 |
黄 |
0度 |
| ⑥ |
” |
紫 |
0度 |
| ⑦ |
” |
マゼンタ |
0度 |
| ⑧ |
” |
金 |
0度 |
| ⑨ |
三角形 |
オリーブ |
0度 |
| ⑩ |
” |
赤 |
30度 |
| ⑪ |
” |
orchid |
-30度 |
| ⑫ |
” |
coral |
180度 |
紙ふぶき画像は基本形を作り、他に3個のコピーを作ります。paint.netなどにより順に回転させ指定の色に設定します。
基本形の外は魔法の杖を使って透明色にします。
七夕飾りに付ける短冊形、円盤形などを用意すればいっそう華やかになることでしょう。
呼び出し側設定データ
jQuery(document).snowfall({
flakeCount : 60, // 落下物の数
//flakeColor : '#FFF', // 落下物の色（画像を使用しないとき）
flakeIndex : 999999, // 落下物のz-index
minSize : 2, // 落下物の最小サイズ
maxSize : 20, // 落下物の最大サイズ
minSpeed : 1, // 落下物の最小落下スピード、値が大きいほど速く落下する
maxSpeed : 8, // 落下物の最大落下スピード、 ”
round : true, // 落下物に丸みを持たせる
shadow : false, // 落下物に影をつける？
//collection : 'div', // 落下物を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した落下物の色が積もります)
image : [ // 落下物を指定の画像に変更
"cofetti-0.png",
"cofetti-1.png",
"cofetti-2.png",
"cofetti-3.png",
"cofetti-4.png",
"cofetti-5.png",
"cofetti-6.png",
"cofetti-7.png",
"cofetti-8.png",
"cofetti-9.png",
"cofetti-10.png",
"cofetti-11.png"]
});
動作例
BGMボタンをクリックすると津軽三味線のBGMが鳴動し、再びのクリックで停止します。
ライブラリー呼び出しソースコード
この使い方では記事全体に紙ふぶきが降り注ぎます。指定した要素内で雪などを降らせるにはさらなる設定をします。それには次のライブラリー呼び出しソースコードをアップロードし、URLアドレスを二つ目のJavaScriptコードのiframeタグのsrc属性に指定します。
<!DOCTYPE html>
<html>
<head><meta charset="Shift_JIS"></head>
<body bgcolor="aliceblue" text="indigo">
<audio id="bgm" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/05/festival.mp3"></audio>
<DIV id="msg" style="position relative; width:580px; height:400px; border:0px red solid;">
<span style="font-size:24px; color:darkslategray">2034年 </span><span style="font-size:34px; color:gold">仙台冬季オリンピック金メダル</span>
<span style="position: absolute; left:10px; top:48px; font-size:40px; color:green">羽田譲選手おめでとう<a id='go' onclick="starting();">🎼</a></span>
<div style="position: absolute; left:470px; top:55px; width:110px; height:40px; border:0px blue solid;">👈BGM<BR>
<span style="font-size:9px; font-weight:bold;">©2018 TacM, Ver0.06</span></div>
<img src="http://aidesign.lolipop.jp/wp-content/uploads/2018/05/sendai580x290.png" style="position: absolute; left:10px; top:110px;">
</DIV>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/05/snowfall.jquery.js"></script>
<script type="text/javascript" charset="Shift_JIS">
var i=0;
jQuery(document).snowfall({
flakeCount : 60, //落下物の数
//flakeColor : '#FFF', //落下物の色（画像を使用しないとき）
flakeIndex : 999999, //落下物のz-index
minSize : 2, //落下物の最小サイズ
maxSize : 20, //落下物の最大サイズ
minSpeed : 1, //落下物の最小落下スピード、値が大きいほど速く落下する
maxSpeed : 8, //落下物の最大落下スピード、 ”
round : true, //落下物に丸みを持たせる
shadow : false, //落下物に影をつける？
//collection : 'div', //落下物を指定の要素に積もらせる設定(画像を設定してもflakeColorで指定した落下物の色が積もります)
image : [ //落下物を指定の画像に変更
"http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-0.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-1.png",
"http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-2.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-3.png",
"http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-4.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-5.png",
"http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-6.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-7.png",
"http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-8.png", "http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-9.png",
"http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-10.png","http://aidesign.lolipop.jp/wp-content/uploads/2018/05/cofetti-11.png"]
});
function starting(){
(i = 1 - i) ? document.getElementById("bgm").play() : document.getElementById("bgm").pause(); //音声再生, 音声停止, 0, 1 ==> 1, 0
document.getElementById("go").innerHTML = String.fromCodePoint(i*0x315+0x1f3bc); //0x1F3BC, 0x1F6D1
}
</script>
</body>
</html>
本文記事に紙吹雪を降らせるソースコード
<!DOCTYPE html>
<html>
<body margin="0" padding="0">
<iframe id="nextName" src="http://aidesign.lolipop.jp/wp-content/uploads/2018/05/throwConfetti.html?2018/05/14" width="600px" height="420px">iframeは未サポート</iframe>
</body>
</html>
もっと良いものにする
- 枯葉がひらひら舞う感じを演出する
- ひらひら感を付加する
- 動画に紙ふぶきを降らせる
- くす玉を割る様を疑似体験できるようにする
- キラキラ光りながら落下する
- クリスマスツリーに雪を積もらせる
- たなばた飾りを模す
感想とおことわり
snowfall.jquery.jsライブラリーは記事全体に雪を降らせるものであり、ウィジェット欄を持つブログなどで本文記事にのみ雪を降らせるにはiframeタグなどを併用する必要があります。上に示したようにソースコードはほんの数行ながらなかなか思い通りに動作してくれず大いに悩みました。
もっと良いものにする項に挙げましたがこの改造をもってしてもひらひら感を出すことはできませんでした。枯葉が舞うときには回転しながら落下しますが、ここではサイズが変わるだけで回転は行われません。実態に合わせて自然な雰囲気を出す必要がありそうです。予算と時間が解決してくれると思われます。
この例題はすべてのケースに対応しているかは不明です。それぞれの責任においてご利用ください。参照させていただいた記事に感謝申し上げます。
部分表示するとき、親要素にposition:relativeを、子要素にposition:absoluteを指定します。
上左図の画像はサイズ100*100の画像を4つ集合したサイズ400*100の画像です。
以下に3～6日ごとに繰り返す算出結果を示します。2は通算日が奇数・偶数かで容易にわかり、7は曜日に関連付けることができるので省略しました。
img要素にposition absoluteを指定し、clip:rectにより取り出すエリアを設定し、位置のずれをtopとleftによって調整して期待した動作を得ました。今回、clip領域を計算により決定せずに、泥臭い方法ながらテーブルを参照する方式に変えたところ思うような動作になりました。以前はcanvasのdrawImage関数を用いて切り抜けていましたが、canvasに頼ることがないので積年の悩みが解消しました。以下にコードを示します。