ホーム画面に雪が降る
まだ私が、アプリやテーマなどを自分で作ることを考えず、誰かが作ったものを探していた頃、どこかのブログで紹介されていたウィジェットに雪を降らせるものがありました。
その時は、そのウィジェットを適用して動作させていないので分かりませんが、こんな感じでかなぁと思いながら作ってみました。
ウィジェットサンプル
iPhoneで閲覧している方は、サンプルをダブルタップすると拡大されますので、ウィジェット実行中の雰囲気を味わえるかと思います。
背景画像を活かすために、「Glasklart」を適用した雰囲気を用意しました。
特徴
雪の大きさや落ちるスピードを５種類に分け、ランダムに指定しています。
大きな雪は速く、小さな雪は遅くすることで、距離感を出しています。
左右にも多少変化させているので、リアル感が増しているかと思います。
更新履歴
2013/02/27 基本形完成
2013/03/01 各種ブラウザに対応
2013/03/03 イニシャルリリース
ダウンロード
ダウンロードはこちら ーーー＞ 雪を降らせる（wp_snow.zip）
カスタマイズポイント
動きを変更する
雪の量
snow.js内、for文の100が雪の量ですので、ご自由に変化させて頂ければ良いのですが、増やせば増やすほどデバイスに負担がかかるため、お手持ちのデバイスに合わせて増減させて下さい。
雪の大きさ
style.css内、#wp_snow div div.snow1〜5においてサイズ指定しています。
雪ですので、縦と横は同じにした方が良いです。
雪の速さ
snow.js内、DropDurationにおいて、雪の降り落ちるのにかかる時間を指定しています。
２〜３内のランダム数字に１〜５内のランダム整数を掛け合わせたものを秒数に指定していますので、これらの組み合わせによりスピードを変化させることができます。
雪の左右変化量
style.css内、@-webkit-keyframes swingにおいて、左右変化量を指定しています。
上下変化の割合に対して、左右の変化を指定しています。
あまり大きくしない方が良さそうです。
雪の形
雪は画像ですので、その画像を変更すればどうにでもなります。
3.5インチへの対応
雪が行き過ぎるだけなので、基本的に変更する必要なありません。
変更するのであれば、style.css内、1136pxの部分を960pxにして下さい。
