こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、Webサイトの背景を動きのある印象に変える「波打つ光のラインアニメーション」の作り方をご紹介します。
このエフェクトは、背景に流れる光の帯のようなアニメーションで、ビジュアルに“奥行き”と“高級感”を加えることができます。
ヒーローヘッダーやLPの背景、またはローディング画面などで使うと非常に効果的です。
CSSだけで実装できるため、軽量で高速。
JavaScriptを使わずに表現できるので、Webパフォーマンスを重視する制作にも向いています。
今回は基本の波アニメーションから、光の強弱をつけた応用まで、段階的に紹介します。
波打つ光のラインをCSSで作る基本構造
まずはシンプルな波のように動く光のラインを描いてみましょう。
以下は基本構造です。
CSSでアニメーションを作成します。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
これだけで、光のラインがゆらゆらと波打つように動きます。
背景全体を通して動くため、サイトに「静かな動き」を与えたいときにぴったりです。
複数のラインで奥行きを出す
次に、複数のラインを重ねて立体感のある動きにしてみましょう。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
これで、複数の光の帯が時間差で流れ、幻想的な雰囲気に。
サイトのビジュアル背景に使えば、動きがありながらも主張しすぎないデザインになります。
応用：光のグラデーションを動かして“光沢感”をプラス
単なる線の動きではなく、光が流れているような質感を出すには、背景のグラデーションをアニメーションさせると効果的です。
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
これにより、波打つラインの中で色が流れるように輝き、まるで光が通り抜けていくような表現になります。
まとめ
背景に「波打つ光のライン」を加えるだけで、静的なWebページに動的な印象を与えることができます。
CSSアニメーションだけで軽快に動作し、JavaScript不要で管理も簡単。
サイトのメインビジュアル、ランディングページ、ローディング演出など、さまざまな場面で活用できます。
satokotadesignキャンペーン実施中！
