ホーム画面に紙吹雪が舞う
「雪が降る」を作っている時に思い出したのが、「桃太郎電鉄」です。
目的地に一番乗りした時の紙吹雪をどのように再現しようか考えていたのですが、雪よりも回転軸を増やすことで解決しました。
ホームに入ってくるＳＬの画像を探したのですが、なかなか見つからなかったので、トーマスの画像を拾って背景にしてみました。
ウィジェットサンプル
iPhoneで閲覧している方は、サンプルをダブルタップすると拡大されますので、ウィジェット実行中の雰囲気を味わえるかと思います。
背景画像を活かすために、「Glasklart」を適用した雰囲気を用意しました。
特徴
基本は「雪が降る」ですが、紙吹雪自体にも回転を加えています。
紙の特性を再現するために、左右の変化は振り子のような動きにしました。
画像を５種類用意することで、大きさ＆色を５段階になるようにしました。
canvasを利用し画像を無くすことで、５色の制限を無くし、ランダムな配色にしました。
更新履歴
2013/03/01 基本形完成
2013/03/03 canvasを利用することで画像を無くした
2013/03/03 紙吹雪の大きさを２倍に変更
2013/03/04 各種ブラウザに対応
2013/03/05 イニシャルリリース
ダウンロード
ダウンロードはこちら ーーー＞ 紙吹雪が舞う（wp_confetti.zip）
カスタマイズポイント
動きを変更する
紙吹雪の量
confetti.js内、for文の100が紙吹雪の量ですので、ご自由に変化させて頂ければ良いのですが、増やせば増やすほどデバイスに負担がかかるため、お手持ちのデバイスに合わせて増減させて下さい。
紙吹雪の大きさ
confetti.js内、rand_numをランダムに決定し、対応するスタイルで大きさを決めています。
ただし、style.css内の#wp_confetti div div canvasでさらに大きさを決定しています。
（現在、大きさを２倍にしております）
紙吹雪の速さ
「雪が降る」と同様に、confetti.js内、DropDurationにおいて、紙吹雪の降り落ちるのにかかる時間を指定しています。
２〜３内のランダム数字に３〜６内のランダム整数を掛け合わせたものを秒数に指定していますので、これらの組み合わせによりスピードを変化させることができます。
紙吹雪の左右変化量
style.css内、@-webkit-keyframes swingにおいて、左右変化量を指定しています。
横方向に移動させてから回転させているので、振り子のような動きをしています。
translateXの値やrotateの値を変化させてみましょう。
紙吹雪の形
紙吹雪は画像ですので、その画像を変更すればどうにでもなります。
canvasで描画していますので、プログラミングにより、どんな形でも描いて下さい。
3.5インチへの対応
紙吹雪が行き過ぎるだけなので、基本的に変更する必要なありません。
変更するのであれば、style.css内、1136pxの部分を960pxにして下さい。
