ホーム画面に風船が飛ぶ
今回は、ホーム画面に風船を飛ばしてみました。
・・・と言うより、この風船を飛ばすためにいろいろ試したと言う方が正しいかもしれません。
ウィジェット開発してきた中で、いつしか風船を飛ばすことを考えていたのですが、イメージしていた背景があったからこその風船だったのです。
その背景とは、「風船太郎」です。
巨大風船に自ら入ってのパフォーマンスが印象的な大道芸人で、TBSの「あらびき団」でご存知の方もいらっしゃるかもしれません。
「欽ちゃん&香取慎吾の全日本仮装大賞」でオスカー像を演じた８４回準優勝者でもあります。
今回は、風船太郎様との共演が実現したウィジェットの紹介です。
ウィジェットサンプル
iPhoneで閲覧している方は、サンプルをダブルタップすると拡大されますので、ウィジェット実行中の雰囲気を味わえるかと思います。
背景画像を活かすために、「Glasklart」を適用した雰囲気を用意しました。
今回のサンプル背景は、風船太郎様から直接頂いた画像です。
「風船太郎」の特徴も特長も出ており、とても画像を提供して頂きました。
特徴
基本は「雪が降る」ですが、動きの種類から言うと「紙吹雪」が一番近いと思います。
左右の変化に振り子のような動きを取り入れていますが、軸中心を工夫することでユラユラ感を出しています。
こちらも画像を５種類用意することで、奥行きを出しています。
更新履歴
2013/03/03 基本形完成
2013/03/05 回転軸を増やして、動きを調整
2013/03/07 「風船太郎」様に掲載用の画像を提供して頂く
2013/03/08 各種ブラウザに対応
2013/03/09 イニシャルリリース
ダウンロード
ダウンロードはこちら ーーー＞ 風船が飛ぶ（wp_balloon.zip）
カスタマイズポイント
動きを変更する
風船の量
balloon.js内、for文の50が風船の量ですので、ご自由に変化させて頂ければ良いのですが、増やせば増やすほどデバイスの負担になるため、お手持ちのデバイスに合わせて増減させて下さい。
風船の大きさ
balloon.js内、rand_numをランダムに決定し、対応するスタイルで大きさを決めています。
ただし、style.css内の#wp_balloon div div imgでさらに大きさを決定しています。
風船の速さ
「雪が降る」と同様に、balloon.js内、ComeupDurationにおいて、風船が上がり切るのにかかる時間を指定しています。
２〜３内のランダム数字に３〜６内のランダム整数を掛け合わせたものを秒数に指定していますので、これらの組み合わせによりスピードを変化させることができます。
風船の左右変化量
style.css内、@-webkit-keyframes swingにおいて、左右変化量を指定しています。
translateXの値を変化させてみましょう。
風船の形
風船は画像ですので、その画像を変更すればどうにでもなります。
中心軸をズラすために、画像自体を縦長にしています。
3.5インチへの対応
風船が行き過ぎるだけなので、基本的に変更する必要なありません。
変更するのであれば、style.css内、1136pxの部分を960pxにして下さい。
