背景を星空にするCSS・JSアニメーション 3パターン
背景に星を降らせてみませんか？
今回は背景を星空にするアニメーションをいくつかご紹介したいと思います。
夜のイメージといえば、はじめに星空や星座を連想すると思います。
私も夜のイメージのある商品の広告を作るときは、星を使った背景を使うことが多いです。
背景の色や星の動き方を変えて、いくつかの星空を作ってみたのでコピペして使ってみてください。
よく読まれている記事
星が消えたり出たりする背景アニメーション
大小のサイズの違う星が、消えたり現れたりするシンプルな星空のアニメーションです。
背景を明るめのグラデーションにすると夕方の星空を表現することができます。
星の量を増やして、満点の星にしてもキレイだと思います。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
星がキラキラ輝くような背景アニメーション
大小のサイズの違う星のまわりがキラキラするような星空のアニメーションです。
さりげなく輝くように、星のまわりがゆらゆらする程度の光を追加しました。
本物の夜空により近づけたい時は、上側に月を追加しても良いかもですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
星が上にゆっくり上昇する背景アニメーション
大小のサイズの違う星が上にのぼっていくような星空のアニメーションです。
ゆっくり上に星が移動していくので、立体的に見せることができます。
プラネタリウムのように幻想的な世界観が作れそうですね。
See the Pen
Untitled by loa (@hana4525)
on CodePen.
よく読まれている記事
まとめ
いくつか星空のアニメーションをご紹介してきましたがいかがでしたでしょうか。
星の数が多いためほとんどがJSでの実装ですが、CSSのみで作れるものもあるので初心者の方にも取り入れやすいと思います。
背景をグラデーションにすることで、夕方の星空やリアルな星空を表現することができます。
デザインに合わせて、星の数や大きさを調整して使っていただけると嬉しいです♪
今後も随時違うパターンも追加していく予定なのでチャックしてみてください。
自分だけの星空を一緒に作っていきましょう！
最後までご覧いただきありがとうございました☆彡