こんにちは！静岡県浜松市で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デザインのアクセントとしても活用できるので、ぜひ試してみてください！
自分のサイトに取り入れて、動きのある魅力的なデザインを演出してみましょう！
- 実店舗の宣伝のためにホームページがほしい！
- サイトをリニューアルしたい
- スマホでも綺麗にサイトを表示したい
- 予算が少ないからきちんと制作してもらえるか不安
- ネットでの集客は成果が上がるのかわからない
そのお悩み全て解決します！
・個人だから他のWeb制作会社よりも圧倒的に安い！
・お客様に寄り添った完全オーダーメイド
お客様一人ひとりに寄り添い、親切丁寧に対応させていただきます。
一緒に素敵なWebサイトを作りましょう！
