こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、背景がザザッと揺れるような「砂嵐風ノイズエフェクト」の作り方をご紹介します。
テレビの砂嵐のようなランダムな動きは、実はCSSだけで再現できます。
canvasや画像素材に頼らず、軽量で負荷も少ないのが魅力です。
この記事では、
・ベーシックな砂嵐ノイズの作り方
・ランダム感を強めるアニメーションの工夫
・背景やセクションへの応用例
までしっかり解説します。
CSSだけで作る砂嵐ノイズの基本構造
砂嵐エフェクトは
「背景にノイズテクスチャを生成 → それを高速アニメーションで動かす」
という流れで作れます。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
ポイント解説
- repeating-radial-gradient を使ってドット状ノイズを生成。
- steps(8) でカクカクしたランダム動きを再現。
- mix-blend-mode: screen で背景とノイズを自然に合成。
より“砂嵐っぽく”見せるアレンジ例
砂嵐らしい「ザザッ」という質感を出すには、
ノイズレイヤーを複数重ねる のが効果的です。
以下は 2レイヤー構成のアレンジ。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
セクション背景として使う場合
背景色を変更すればさまざまなデザインに応用できます。
例：ヒーローヘッダーに砂嵐背景を敷くなど。
レトロTV風の揺れ
・粒状ノイズが常に動く
・RGB（赤・シアン）チャンネルが横にずれて “ずれノイズ” が発生
・JS がランダム性を追加し、レトロTV風の揺れを演出
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
- opacity を調整して控えめな質感にする。
- animation-speed を上げて激しい砂嵐にする。
- ノイズサイズを大きくし“荒目”の演出にする。
まとめ
CSSだけで砂嵐エフェクトはここまで表現できます。
特別な画像素材も JavaScript も不要で、パフォーマンスにも優れています。
視覚的な動きを加えたい場面で、今回のテクニックをぜひ使ってみてください。
satokotadesignキャンペーン実施中！
