マウス操作で波紋が広がる！CSS＋Canvasで作る液体のように揺れる背景アニメーション

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。 今回は、マウス操作に合わせて“水面のようにゆらめく”背景アニメーションを作る方法をご紹介します。

この「液体が揺れる」エフェクトは、Webサイトに“生きているような動き”を与えられる面白い演出です。 背景に使えば高級感や未来感を、ロゴやバナーに使えば視線誘導にも効果的。 Canvas や WebGL を使う高度な方法もありますが、今回は CSS＋JavaScriptだけで実装できる軽量バージョン を紹介します。

マウス操作で反応する液体アニメーションとは？

「液体アニメーション」とは、マウスの動きやスクロールなどに合わせて波紋やゆらぎが広がる演出のことです。

たとえば、トップページの背景に動きをつけて見せたい場合や、動的なインタラクションを加えたいときに最適。 WebGLやThree.jsで実現する方法もありますが、今回はシンプルな2Dコンテキスト＋ノイズで表現します。

この演出では、マウスの位置を中心に波紋を描き、時間とともにゆらゆらと広がっていきます。

実装の仕組み

今回の仕組みは次のようになります。

1. HTMLに全画面のCanvasを配置
2. JavaScriptでマウスの位置を取得
3. sin関数を使って波のような変化を描画
4. 時間経過で徐々に波紋をフェードアウト

シンプルながら、動かすとまるで“光が揺れているような感覚”を再現できます。

基本コード

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

このコードでは、マウス座標を基点に波のような変位を加えています。 Math.sin()を使ってゆらぎを生み出し、距離に応じて色や位置を微妙に変化させています。

Canvasを利用することで、自由度の高いエフェクト表現が可能です。 Webサイトの背景や、ローディング画面に組み込むと高い演出効果が得られます。

まとめ

マウスに反応して“液体が揺れる”ようなエフェクトは、Webサイトに自然な動きを加える魅力的な演出です。 CSSとJavaScriptだけでも十分に再現でき、他のアニメーションと組み合わせればさらに表現の幅が広がります。

特にブランドサイトやクリエイティブ業界のLPでは、ユーザーの印象を大きく変えることができます。

あなたのサイトにも、少し“光の魔法”を加えてみませんか？

satokotadesignキャンペーン実施中！

静岡県浜松市でホームページ制作ならsatokotadesign