パーティクル背景（CSS のみ）
小さなドットがゆっくり下から上へ浮かび上がり、テック系サイトの背景に静かな動きを添える演出です。CSS のみで構成され、複数の span 要素それぞれに @keyframes の translateY を割り当て、 nth-child ごとに animation-delay と animation-duration…
解説
小さなドットがゆっくり下から上へ浮かび上がり、テック系サイトの背景に静かな動きを添える演出です。CSS のみで構成され、複数の span 要素それぞれに @keyframes の translateY を割り当て、nth-child ごとに animation-delay と animation-duration、左右位置をずらすことで、規則性を感じさせない自然な漂いを作っています。JavaScript も外部ライブラリも使いません。
こんな場面に
- SaaS やテック企業のヒーロー背景に、控えめな奥行きを足したいとき
- キャッチコピーの後ろで、画面を寂しく見せたくないとき
- 読み込みが軽いままリッチに見せたいランディングページ
粒子の色は span の background、数は要素の追加で調整できます。ただし各 nth-child に個別指定があるため、増やすときは位置と時間の指定もセットで足す必要があります。背景のグラデーションを変えればテック以外のトーンにも転用可能です。常時ループのため、動きに敏感なユーザー向けに prefers-reduced-motion でアニメーションを止める分岐を用意しておくと配慮が行き届きます。
使用例・適したシーン
- ヒーロー背景
- セクション区切り
- フッター前装飾
よくある質問
粒子の数を増やすにはどうすればいいですか？
HTML に span を追加し、その番号の nth-child セレクタに left の位置、animation-delay、animation-duration を指定します。既存の粒子は個別に値を持つため、新しい粒子にも同様の指定が必要です。
動作は重くなりませんか？
粒子は CSS の transform で動かしており、要素数も少ないため一般的な端末では軽快です。極端に数を増やすと負荷が上がるので、背景用途では十数個程度に抑えるのがおすすめです。