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