背景に紙吹雪を降らせるJSアニメーション 4パターン
紙吹雪を降らせてみたい♪
今回はお祝いの時によく使われる紙吹雪のアニメーションをご紹介したいと思います。
jsアニメーションで作成して、色や数を調整してみました。
当たりの演出時や、お祝いのLPの背景に使っていただけるようなデザインにしているので、いろんな場面で使っていただけると思います。
では一緒に実装していきましょう♪
よく読まれている記事
赤と黄色の紙吹雪が降ってくるアニメーション
青空に赤と黄色の2色の紙吹雪がランダムに降ってくるような背景アニメーションです。
シンプルに2色の紙吹雪だけを降らせて、量もコンテンツの邪魔にならないように調整しています。
少しおめでたい感じを出したいときにぴったりの実装です。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
カラフルな紙吹雪が降ってくるアニメーション
白背景にカラフルな4色の紙吹雪がランダムに降ってくるような背景アニメーションです。
4色の紙吹雪を多めに降らせて、紙を回転させることで本当に上から降ってきているように見えますね。
カラフルな色味なので、背景色をシンプルなものがおすすめです。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
モノクロの紙吹雪が降ってくるアニメーション
黒背景にモノクロの3色の紙吹雪がランダムに降ってくるような背景アニメーションです。
白とグレーの色味を調整して降らせることで、より奥行きがあるようにみせることができます。
シックな感じにしたいときに使ってほしいデザインです。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
ゴールドの紙吹雪が降ってくるアニメーション
黒グラデーションに3色の金色のような紙吹雪がランダムに降ってくるような背景アニメーションです。
ゴールドの紙吹雪が黒背景に良く映えるデザインですね。
No1などのランキングの背景に使ってみたい実装です。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
紙吹雪のアニメーションはいかがでしたでしょうか？
紙の色を変えたり、背景を変えるとよりリアルな紙吹雪を表現できると思います。
お祝い感がすごくあるので、見ているだけですごく嬉しい気持ちになりますね。
私もあまり使う機会はなかったのですが、今後はLP内で積極的に使ってみたいなと思いました。
みなさんもいろんなパターンで作ってみてください♪
最後までご覧いただきありがとうございました☆彡