こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトの中で画像を「どう見せるか」というのは、デザインに大きく影響する要素です。
シンプルに配置するだけでももちろん良いのですが、動きや質感をプラスすることで、印象をぐっと強めることができます。
特に、自然界のエフェクトを取り入れると、人の目は無意識に引き寄せられやすくなります。
今回紹介するのは、画像に「液体っぽい波紋」を与える表現です。
まるで水面に揺れる映像のように、画像がゆらゆらと動く演出をCSSとSVGフィルターを使って再現していきます。
JavaScriptを使わずにCSSだけで実装できるため、比較的軽量で扱いやすいのも魅力です。
この手法は、ポートフォリオサイトやビジュアル重視のLPなどで特に効果的。
ユーザーの視線を自然と集められるだけでなく、「静止した画像」を「動くコンテンツ」へと昇華させることができます。
液体っぽい波紋エフェクトの仕組み
波紋のようなゆらぎを作るには、CSS単体では限界があります。
そこで活躍するのが SVGフィルター。
feTurbulence と feDisplacementMap を組み合わせることで、画像を液体のように変形させられます。
- feTurbulence：ノイズを生成し、波紋の「揺らぎ」のもとを作る
- feDisplacementMap：ノイズを画像に適用し、液体のように歪ませる
- CSSのfilterでSVGフィルターを呼び出す
これだけで、静止画像に水面のような揺れを与えることができます。
実装コード例
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
これで、画像に「水面のような波紋エフェクト」が適用されます。
応用例
このエフェクトは、設定を調整することで多彩なバリエーションが楽しめます。
- 波の大きさを変える：scale値を変更
- 揺れのスピードを調整：durでアニメーション時間を変更
- 背景画像やバナーに適用して高級感を演出
例えば、scale="10"にすると小さな水面の揺れになり、逆にscale="50"にすると大胆な液体変形になります。
シーンによって調整すれば、写真だけでなく背景やボタンにも応用できるでしょう。
まとめ
CSSとSVGフィルターを組み合わせることで、画像に「液体っぽい波紋」を与える表現が簡単に実現できます。
静止したビジュアルに動きを加えるだけで、ユーザーの印象は大きく変わり、サイト全体に臨場感や奥行きを持たせることができます。
この技術は軽量でありながら強いインパクトを与えられるため、デザインのアクセントとしてぜひ活用してみてください。
satokotadesignキャンペーン実施中！
