12月のクリスマスシーズンになると、雪を降らせているブログをたまに見かけますよね。
その方法は、jQuery を使ったものから CSS だけで動かしているものまでいくつかあります。そこで今回は「ブログに雪を降らせる方法」をまとめてみました。
初心者でも簡単に実装する方法があるので、雪が降らない地方にお住まいなら、ブログ上だけでもホワイトクリスマスを楽しみましょう！
Headline
JavaScript・jQueryを使う方法
snow.js
まずは、atokala さんで配布されている JavaScript を使う方法。jQuery ライブラリは不要です。
画面内に表示する雪の数や大きさ、アニメーションが動作する時間などを設定することができるので、好みに合わせてカスタマイズすることができます。
表示速度に影響するため、iPad、iPhone、Android では表示されません。スマホやタブレットでも雪を降らせたい場合は、次にご紹介する JavaScript がいいかも。
Snow Particle
こちらは actyway さんで配布されている JavaScript。
PC 向けが3種類、スマホ向けが2種類公開されているので、端末によって切り替えるとさほど重くならずに使えると思います。
スクリプトの簡単な解説や設置方法も紹介されているので、ブログカスタマイズに慣れてきた頃ならチャレンジしてみましょう。
JQuery-Snowfall
つづいて、jQuery プラグイン。
雪の数や大きさなどを指定できるほか、オリジナルの画像を指定することもできます。ただの丸い粒ではなく、雪の結晶にするのもオシャレですね。
さらに「指定した要素に雪を積もらせる」という設定もあります。使いどころが難しいですが、スライドや動画を見ている間に雪が積もっていく、なんていうのが面白いかも。
詳しい使い方はこちらをご参考に
3Dバージョン
ただチラチラ雪が降るのではなく、奥行きが感じられる 3D バージョン。カーソルを動かすと、風に舞うような動きをしてくれます。
HTML5 の Canvas を使うとこんなこともできるんですね。
ただ残念ながら、ブログ内のリンクがクリックできません。画面上のどこかをクリックすると雪が消え、その状態になってからであれば通常どおり操作できます。
ユーザビリティは悪いですが、お遊びということで。
CSSを使う方法
JavaScript とかよくわからん！という方は CSS のみで実現してみましょう。
CSS Snow Effect
CSS3 の animation を利用して雪を降らせる方法。
雪の画像を3枚用意し、奥の雪は速く動かし、手前の雪は遅くすることで立体感を出しています。動かす方向を変えるとまたイメージも変わりそうですね。
CSS なので、指定した要素内のみ雪を降らせることができます。
.snow_box {
background-color: #000;
background-image: url(images/snow1.png), url(images/snow2.png), url(images/snow3.png);
-webkit-animation: snow 20s linear infinite;
animation: snow 20s linear infinite;
width: 300px;
height: 300px;
margin-bottom: 36px;
}
@-webkit-keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
@keyframes snow {
0% { background-position: 0px 0px, 0px 0px, 0px 0px }
50% { background-color: #b4cfe0 }
100% {
background-position: 500px 1000px, 400px 400px, 300px 300px;
background-color: #6b92b9;
}
}
JavaScript より CSS で実装したほうが軽い！と思われがちですが、処理によっては CSS でもけっこう重くなるので使いすぎにはご注意ください。
WordPressプラグインを使う方法
WordPress を使っているなら、JavaScript や CSS をいじらなくてもプラグインで簡単に雪を降らせることができます。
Jetpack by WordPress.com
「全部入り」という感じの Jetpack ですが、実はこのプラグインには雪を降らせる機能までついています。
有効化してあれば、【設定】－【一般】のなかに「1月4日まで雪を降らせる」という項目が出ているはず。
いつから出現するのか定かではありませんが、おそらく12月上旬には出てくると思います。
WordPress.com でブログを運営していれば、この機能は標準装備されているようです。
Snowy
「雪を降らせるためだけに Jetpack を導入したくないし、期間も自分で設定したい」という場合は、インストールするだけで設定不要の Snowy がおすすめ。
ただ、背景が白のブログだと全然気づかれないので、そんな場合はプラグイン自体をちょこっと改造する必要があります。
snowy/js/jquery.snow.js のなかに下記の記述があるので、「flakeColor」の値をお好みで変えましょう。Betz では「#EEEEEE」を指定してちょっぴりグレーにしています。
minSize : 10, maxSize : 20, newOn : 500, flakeColor : "#FFFFFF"
管理画面の【プラグイン編集】から直接カスタマイズできますが、間違って変なところをいじってしまわないようバックアップは忘れずに。
WP Super Snow
もう少し細かく設定したいなら、こちらのプラグインがおすすめ。
雪を降らせる場所や量・サイズ・画像を設定画面から指定することができます。
詳しい設定方法はこちらが参考になります
番外編
ブログに雪を降らせるのではなく、カーソルを動かすとそこから雪が出てくる！というのもできます。
こちらはブログパーツとして配布されていて、無料ブログでも簡単に設置できます。
期間限定でちょっとしたアクセントがほしいけど画面全体に雪がちらつくのはジャマだよー、という方におすすめ。
まとめ
以上、JavaScript や jQuery を使う方法、CSS のみで実装する方法、WordPress プラグインで簡単に実装する方法のご紹介でした。
クリスマスやお正月のイベントにぜひ。画像が置換できるものは、春に桜、秋に落ち葉なんかを指定すると季節感が出ていいかもしれませんね。
あまりやりすぎると、読みづらく、ブログ全体も重くなってしまうので適度に使ってみてください。
それでは、また。