CSSとJavaScriptで作る星空アニメーション｜ランダムに点滅する夜空の実装方法

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。

Webサイトの背景演出として人気の高い「夜空の星アニメーション」。
静止した背景画像よりも、星がランダムに点滅しているだけでページ全体がグッと華やかになります。
今回は CSSと少しのJavaScript を組み合わせて「星がランダムにきらめく夜空」を作る方法をご紹介します。

完成イメージ

実際に動かすと、幻想的な雰囲気を体験できますよ。

デモコード

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

基本のHTML

まずは星空を描画するためのベース要素を用意します。

<div class="sky"></div>
<footer class="credits">CSS Twinkling Stars Demo</footer>

ここでは .sky コンテナ内に JavaScript で星（＜span class="star"＞）を自動生成する仕組みを作ります。

CSSで夜空と星をデザイン

次に、夜空の背景と星のスタイルをCSSで指定します。

:root {
  --hue: 230;
  --sky-from: hsl(var(--hue) 35% 6%);
  --sky-to:   hsl(var(--hue) 55% 12%);
}

body {
  margin: 0;
  background: radial-gradient(1200px 600px at 50% -20%, var(--sky-to), var(--sky-from) 60%) fixed;
  overflow: hidden;
}

.sky {
  position: fixed;
  inset: 0;
}

.star {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.95) 0 40%, rgba(255,255,255,0) 70%);
  opacity: var(--base-opacity, .65);
  animation: twinkle var(--twinkle, 2.2s) ease-in-out infinite;
  animation-delay: calc(var(--delay, 0s) * -1);
}

@keyframes twinkle {
  0%, 100% { opacity: .6; transform: scale(1); }
  40%      { opacity: .2; }
  70%      { opacity: 1; transform: scale(1.1); }
}

ここでは星を円形の radial-gradient で描き、@keyframes で透明度を変えることで点滅アニメーションを実現しています。

JavaScriptで星をランダムに配置

星の数や位置、点滅のタイミングをランダム化することで、より自然な夜空を表現します。

const sky = document.querySelector('.sky');
const STAR_COUNT = 220;

const rand = (min, max) => Math.random() * (max - min) + min;

for (let i = 0; i < STAR_COUNT; i++) {
  const star = document.createElement('span');
  star.className = 'star';

  star.style.left = `${rand(0, 100)}%`;
  star.style.top  = `${rand(0, 100)}%`;
  star.style.width = star.style.height = `${rand(1, 3)}px`;

  star.style.setProperty('--base-opacity', rand(0.35, 0.9));
  star.style.setProperty('--twinkle', `${rand(1.6, 3.8)}s`);
  star.style.setProperty('--delay', `${rand(0, 4)}s`);

  sky.appendChild(star);
}

これで、星が自然な間隔で点滅するようになります。

流れ星を加えてみる

See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.

さらに臨場感を出したい場合は「流れ星」を追加するのがおすすめです。

CSS

.shooting {
  position: absolute;
  width: 140px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255,255,255,0.9), rgba(255,255,255,0));
  animation: shoot 1.8s ease-in forwards;
}

@keyframes shoot {
  0%   { transform: translateX(0); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateX(120vw); opacity: 0; }
}

JavaScript

function spawnShootingStar() {
  const s = document.createElement('div');
  s.className = 'shooting';
  s.style.top = `${rand(5, 45)}%`;
  document.querySelector('.sky').appendChild(s);
  setTimeout(() => s.remove(), 2000);
}

setInterval(() => {
  if (Math.random() < 0.3) spawnShootingStar();
}, 5000);

5〜10秒に1度くらいの頻度でランダムに流れるようにすると自然です!

アクセシビリティの工夫

アニメーションを多用する場合、動きを減らす設定（prefers-reduced-motion）を考慮するのも大事です。

@media (prefers-reduced-motion: reduce) {
  .star { animation: none; opacity: .8; }
  .shooting { display: none; }
}

まとめ

今回ご紹介した手法を使うと、以下のような特徴を持った背景アニメーションを実装できます。

Webサイトのトップページやイベント告知サイトなどで活用すれば、雰囲気を大きく引き立てられます。

satokotadesignキャンペーン実施中！