こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
今回は、マウス操作に合わせて“水面のようにゆらめく”背景アニメーションを作る方法をご紹介します。
この「液体が揺れる」エフェクトは、Webサイトに“生きているような動き”を与えられる面白い演出です。
背景に使えば高級感や未来感を、ロゴやバナーに使えば視線誘導にも効果的。
Canvas や WebGL を使う高度な方法もありますが、今回は CSS＋JavaScriptだけで実装できる軽量バージョン を紹介します。
マウス操作で反応する液体アニメーションとは？
「液体アニメーション」とは、マウスの動きやスクロールなどに合わせて波紋やゆらぎが広がる演出のことです。
たとえば、トップページの背景に動きをつけて見せたい場合や、動的なインタラクションを加えたいときに最適。
WebGLやThree.jsで実現する方法もありますが、今回はシンプルな2Dコンテキスト＋ノイズで表現します。
この演出では、マウスの位置を中心に波紋を描き、時間とともにゆらゆらと広がっていきます。
実装の仕組み
今回の仕組みは次のようになります。
- HTMLに全画面のCanvasを配置
- JavaScriptでマウスの位置を取得
- sin関数を使って波のような変化を描画
- 時間経過で徐々に波紋をフェードアウト
シンプルながら、動かすとまるで“光が揺れているような感覚”を再現できます。
基本コード
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは、マウス座標を基点に波のような変位を加えています。
Math.sin()を使ってゆらぎを生み出し、距離に応じて色や位置を微妙に変化させています。
Canvasを利用することで、自由度の高いエフェクト表現が可能です。
Webサイトの背景や、ローディング画面に組み込むと高い演出効果が得られます。
まとめ
マウスに反応して“液体が揺れる”ようなエフェクトは、Webサイトに自然な動きを加える魅力的な演出です。
CSSとJavaScriptだけでも十分に再現でき、他のアニメーションと組み合わせればさらに表現の幅が広がります。
特にブランドサイトやクリエイティブ業界のLPでは、ユーザーの印象を大きく変えることができます。
あなたのサイトにも、少し“光の魔法”を加えてみませんか？
satokotadesignキャンペーン実施中！
