こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
Webサイトに「水面の揺れ」や「波紋エフェクト」を加えることで、幻想的で魅力的なデザインを演出できます。
今回は、CSSだけで作るシンプルな波紋アニメーションと、jQueryプラグイン「Ripples」を使った本格的な水面エフェクトの2つの方法を紹介します。
どちらも簡単に実装できるので、ぜひ試してみてください！
1. CSSだけで水面を揺らす
まずは、CSSの@keyframesを使い、シンプルに水面の揺れを再現してみましょう。
【実装のポイント】
- border-radiusを使って波紋の円を作る
- @keyframesを使って拡大・縮小を繰り返す
- opacityを変化させ、自然に波が消えていくようにする
【実装コード】
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは、円がゆっくり拡大しながら透明になり、水面に広がる波紋を再現しています。
2. jQueryプラグイン「Ripples」でリアルな水面エフェクトを実装
CSSだけでも波紋を作れますが、よりリアルな「水の揺れ」を表現するには、jQueryプラグイン「Ripples」が便利です。
「Ripples」を使えば、クリックやホバーで波紋が広がるエフェクトを簡単に追加できます。
【実装のポイント】
- SVGのpath要素を使って波の形を作る
- @keyframesで波の形を滑らかに変化させる
- 複数の波を重ねることで立体感を出す
【実装コード】
See the Pen
Untitled by 小瀧賢 (@ekwwawpb-the-styleful)
on CodePen.
このコードでは、波の動きをSVGのpathをアニメーションさせることで表現しています。
まとめ
今回は、HTML・CSS・jQueryを使って水面が揺れるアニメーションを作成しました。
ポイントまとめ
- CSSだけでシンプルな波紋を作成可能
- jQueryプラグイン「Ripples」を使えば、本格的な水面の動きを簡単に追加できる
- オプションを調整することで、好みの波の動きを作成可能
水の表現は、Webデザインのアクセントとしても活用できるので、ぜひ試してみてください！
自分のサイトに取り入れて、動きのある魅力的なデザインを演出してみましょう！
satokotadesignキャンペーン実施中！
