ブラウザ幅に合わせて背景画像を表示して雪を降らせるページを作成したのですが、なかなかうまく表示されなかったのでメモしておきます。
ブラウザ幅に合わせて背景画像を表示する方法
cssでbodyタグに背景画像指定し、background-size: cover;を指定すれば、うまく表示されます。
ただこれだと、パソコン上では表示されますが、スマホだと画面いっぱいに表示されないんです。
スマホだと余白部分ができてしまうので、下記サイトを参考にしたらスマホでも画面いっぱいに表示されるようになりました。
PC/スマートフォンで背景画像を固定する
さらに背景画像で使う画像ですが、スマホから閲覧した時に大きい画像を表示すると重くなってしまうので、下記サイトを参考にして画面幅に合わせて表示する画像の切り替えもしました。
HTMLの背景画像として写真1枚を全画面に表示する方法 [ホームページ作成] All About
HTMLの背景に画像を全画面で表示させる方法を解説。ブラウザのウインドウサイズに関係なく、1枚の背景画像が縦横比を維持して必ず画面全体を覆うように表示できます。CSSのbackground関連プロパティを書くだけの簡単な方法で、フルスクリーンでの縦横中央配置ができます。画面サイズに応じて適切な解像度の画像に切り替えて読...
allabout.co.jp
雪を降らせる方法
背景画像いっぱいにした状態で雪を降らせたからでしょうか？
いろいろなサイトを参考にしたのですが、なぜだか変な動きをすることが多くて困っていました。
下記サイトの方法で雪を降らせたらスマホでもタブレットでもパソコンでもうまく動きました。
webサイトに雪を降らせてくれるjquery snowfall.jsが素敵( ˘ω˘)
ちょっと雪の量を減らし、スピードを遅くしたかったので、設定を下記に変えました。
<!-- nowfall.jquery.js設定 -->
<script type="text/javascript">
$(window).load(function(){
$(document).snowfall({
round:true,
shadow:false,
minSize:2,
maxSize:12,
flakeCount:55,
minspeed:1,
maxSpeed:3
});
});
</script>
実際にできたページが「DEMO」ボタンから確認できます。
皆さんブログなどで参考になるものをたくさん記載してくれているので、いつも助けられてます！！
