背景に桜が舞うJSアニメーション 3パターン
春には桜を降らせてみませんか？
今回は、桜が降ってくるような背景のアニメーションをいくつかご紹介したいと思います。
これまでにも雪や雨や星が降っているような自然を表現した背景アニメーションをご紹介してきましたが、PV数も多く思ったよりも好評でした。
日本には四季があるので、季節ごとにページの背景を変えることで簡単に季節感を出すことができます。
春は特に入学や進学に関するイベントが多いので、背景に桜を降らすことでお祝いや楽しい印象になります。
コピペで簡単に実装できるので、初心者の方にもおすすめです。
それでは一緒に見ていきましょう♪
よく読まれている記事
桜が降ってくる背景のアニメーション
桜がくるくる回転しながら落ちてくるような背景アニメーションです。
背景が白なので薄いピンク色の桜が良く見えて、さりげなく春を感じることができます。
ちょっとだけおめでたい感じを表現したいときにおすすめです。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
青空にピンクの桜が降ってくる背景のアニメーション
青いグラデーション背景にピンクの桜がくるくる回転しながら落ちてくるような背景アニメーションです。
背景を青と白のグラデーションにして、少し濃いピンク色の桜にすることでイラストっぽい感じになります。
はっきりとした色味を使いたいときにはこの色合いが使えそうですね。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
ピンクの背景に白い桜が降ってくる背景のアニメーション
ピンク色の背景に白い桜がくるくる回転しながら落ちてくるような背景アニメーションです。
背景をピンク系のグラデーションにして、桜を白色にすることでパステル調の淡い雰囲気を作ることができます。
背景の色を赤に変えてバラのようにみせることもできそうですね。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
夜空に光る桜が降ってくる背景のアニメーション
暗めの背景に薄いピンクの光る桜がくるくる回転しながら落ちてくるような背景アニメーションです。
背景を紫系の暗いグラデーションに、薄いピンクの桜のまわりに白いぼかしシャドウを作ることで光っているように見せることができます。
使う機会は少ないかもしれませんが、ぼかしシャドウで他のものも光らせてみたいですね。
See the Pen
背景アニメーション by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
今回は桜がひらひらと降りてくるようなアニメーションをご紹介しましたが、実装できたでしょうか。
背景や花びらの色を変えるだけで、いろいろなパターンの桜を表現することができます。
桜だけでなく花びらの色を赤に変えるとバラっぽくもなりますし、黄色にするとひまわりのようにも見せることができます。
背景にグラデーションカラーだけでなく、桜の木の画像を設置するとよりリアルに桜の背景を表現することも可能です。
春のキャンペーンなどで一度使ってみていただけたら嬉しいです。
最後までご覧いただきありがとうございました☆彡