関西は滋賀の貸別荘「すずめのおやど」に雪を降らせる

すずめのおやどに雪を降らせる

部屋の窓から、雪の降るのを眺めていたら、こんなことを思いついた。「すずめのおやど」のブログに載っていた冬の写真に雪を降らせて見よう。どこかのテンプレートサイトに星が動いているのを見たことがある。調べて行くとDesign Templateの素材コーナーにあった。ここで「雪をイメージしたエフェクト画像」をダウンロード。コードは同サイトのテンプレートを参考にして作った。

effect.jsの変更

オリジナルはif(i>-220){i=i-1;}else{i=-1;
このままだと、雪の降る方向が逆になるので、
if(i>220){i=1;}else{i=i+1;
とした。この220は雪画像の縦方向サイズ。つまり縦方向サイズに達したら、リセットされ最初から続けるのである。

写真と雪画像との隙間

この部分は＜div id="oyado"＞＜div id="snows"＞＜/div＞＜/div＞と入れ子になっているので、親でのmarginに影響を受けて、写真と雪画像の間に右方向の隙間が出来た。
そこで、cssの上書きをするため、id="oyado"に対して、#main section #oyado div{ margin:0; }とした。これで二つの画像がぴたりと重なった。
また、これはid=oyadoのpositionをrelative、id="snows"のpositionをabsoluteにして、雪画像のleftをマイナスしてもできた。

雪画像の透明度

雪画像に透明度を設定し、写真の明度を調整した。
つまり、background-color:rgba(0,0,0,0.2)を追加した。
雪画像の透明度を0.2に設定したのは、まだ明るさを残している画面にしたかったからである。

スマホへの対応

PC用はbackgroundのサイズと写真のサイズを同じくしたので、枠内にきちんと収まっているが、スマホでは枠から写真がはみ出してしまう。それを解決してくれたのが、 background-size:cover; と言うコード。これにより、枠内に縮小してくれる。似たコードにcontainがあることも知った。
このcoverを効果的に使ったのが、このページのロゴ画像。ＰＣ・タブレット・スマホと変えて行った時、ウィンドウのサイズによらず、ロゴの縦方向位置が、綺麗に表示されるようになった。

別な写真に雪をゆっくり降らせる

雪の降下速度を遅くし、背景画像を少し明るくして、もう少しで雪が止みそうな情景を表現して見た。これ位の雪なら、風もなく穏やかな感じだ。

夜が更けると細かな雪に変わった

雪の画像をリサイズして、約半分の490×113にした。こうする事によって、より細やかな雪になった。と同時に、if(i>220)の部分を、if(i>113)にして見たが、どの値でも動作した。ただ、ある値によっては動作が不自然になった。
透明度を更に暗いほうにもって行くと、こんな風になった。粉雪が降り続くと言う感じか。

雪の動作を検証

雪画像の代わりに、「すずめのおやど」そのものになって貰って、動きを検証して見た。例のifの部分はif(i>327)と画像の縦サイズと同じくした。

これだと、動きがスムーズであるが、数値を小さくすると、最後まで移動しないうちに最初に戻ってしまうので、動きがぎこちなくなってしまう。逆に327よりずっと大きな500にしたら、327と同じ結果であった。327のとき、よく観察すると一番下で、一旦動きが止まりスムーズさに欠けるので、数値を326にしたら、良くなった。なお、上の動きは326のときである。（スマホでは縮小のせいで、画像途中でリセットされる。）