Background

背景を星空にするCSS・JSアニメーション 3パターン

星空アニメーション
Loa

背景に星を降らせてみませんか?

今回は背景を星空にするアニメーションをいくつかご紹介したいと思います。

夜のイメージといえば、はじめに星空や星座を連想すると思います。

私も夜のイメージのある商品の広告を作るときは、星を使った背景を使うことが多いです。

背景の色や星の動き方を変えて、いくつかの星空を作ってみたのでコピペして使ってみてください。

星が消えたり出たりする背景アニメーション

大小のサイズの違う星が、消えたり現れたりするシンプルな星空のアニメーションです。

背景を明るめのグラデーションにすると夕方の星空を表現することができます。

星の量を増やして、満点の星にしてもキレイだと思います。

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のみで作れるものもあるので初心者の方にも取り入れやすいと思います。

背景をグラデーションにすることで、夕方の星空やリアルな星空を表現することができます。

デザインに合わせて、星の数や大きさを調整して使っていただけると嬉しいです♪

今後も随時違うパターンも追加していく予定なのでチャックしてみてください。

自分だけの星空を一緒に作っていきましょう!

Loa

最後までご覧いただきありがとうございました☆彡