デザインに一味！水っぽいエフェクトを24つ集めてみました

デザインに一味！水っぽいエフェクト集

デザインにもう一味加えたい！
そんな時に使える水系エフェクトを集めてみました！
背景やテキスト、タイトルやローディングに使えるものを集めてみたので、悩んだときに参考にしてみてください。

Waterdroplet WebGL Shader

雨が降ってる日の窓ガラスのようなエフェクト。WebGLを使用しているようです。

See the Pen Waterdroplet WebGL Shader by Stefan Weck (@stefanweck) on CodePen.light

water effect

一滴一滴波紋が広がっていくようなエフェクト。

See the Pen water effect by Gerard Ferrandez (@ge1doot) on CodePen.light

Water Effect on text

文字の後ろで波打っているようなエフェクト。
CSSだけで実装できるので驚き。

See the Pen Water Effect on text by ADARSH (@IamAdarsh) on CodePen.light

Text Water Effect

こちらは文字に水が満ちたり減ったり。これもCSSだけみたいです。

See the Pen Text Water Effect by RandyGarza (@RandyGarza) on CodePen.light

water simulation

カーソルに合わせて、境界線が水みたいに跳ねます。

See the Pen water simulation by Maxim (@Naumov1889) on CodePen.light

Fill Water Effect with CSS

ホバーすると丸の中に水が満ちていくようなエフェクト。
ホバーを解除すると少しずつ中身も減っていきます。

See the Pen Fill Water Effect with CSS by CodingBear (@codingbear) on CodePen.light

Red Stapler Sea Effect

全体の画像と、水面のみの画像を重ねて、水面の画像を揺らすことで波っぽい感じを表現しているみたいです。

See the Pen Red Stapler Sea Effect by James Sherry (@jmsherry) on CodePen.light

Wobbly water effect

丸がぽよんぽよん。生きているみたいに見えますね。

See the Pen Wobbly water effect by Nicholas Gew (@NicG12) on CodePen.light

Mouse hover water effect

カーソルに合わせて波紋ができます。

See the Pen Mouse hover water effect by DPDK (@dpdknl) on CodePen.light

RIPPLES

こちらもカーソルに合わせて波紋ができます。

See the Pen RIPPLES by al-ro (@al-ro) on CodePen.light

Simple SVG Water Effect

オーソドックスに水っぽい感じがします。

See the Pen Simple SVG Water Effect by Kevin Levron (@soju22) on CodePen.light

Water effect shader

激しめの水っぽいエフェクト。

See the Pen Water effect shader by Alain (@AlainBarrios) on CodePen.light

Bubbling effect

水の底からぷくぷくと泡が出てくるようなエフェクトです。

See the Pen Bubbling effect by JuSchz (@juSchz) on CodePen.light

Pixi Sprite Bubbles

じゅわっと一瞬で消える泡のエフェクト。ローディングとかによさそうですね。

See the Pen Pixi Sprite Bubbles by Juan Fuentes (@JuanFuentes) on CodePen.light

rain drop

雨が降っているかのようなエフェクト。フッターとかで使えそう。

See the Pen KKpYNPP by Aya (@marony94013) on CodePen.light

Water Effect

ローディング時に使える水っぽいエフェクト。

See the Pen Water Effect by Robyn Peterson (@ra_ra_robyn) on CodePen.light

Untitled

背景色も相まって、じんわりと水の感じがよいですね。
コンテンツの邪魔もしなさそうで良いです。

See the Pen poJaERz by Pavel (@xuryrg2034) on CodePen.light

Css Button Drop Water Effect

ホバーするとボタンに水っぽいエフェクトが発動。CSSだけで実装してるみたいです。

See the Pen Css Button Drop Water Effect by Mohammad Abdus Salam (@salam007) on CodePen.light

Button water effect. Pure CSS

これもボタンに水っぽいエフェクト。ネオンがかかってきれいです。

See the Pen Button water effect. Pure CSS by German (@html-mentor) on CodePen.light

PIXI & GSAP Interactive Ripples and Water Effect using Displacement Filters

読み込み時に使えそうな、ぐんっとくる水エフェクト。
プラス、カーソルに合わせて波紋ができます。

See the Pen PIXI & GSAP Interactive Ripples and Water Effect using Displacement Filters by ALI SOUILHI (@progali) on CodePen.light

Water effect animation

エンドレス波紋。

See the Pen Water effect animation by Arush Singh (@arushsingh) on CodePen.light

webgl water effect + images slider

水のエフェクトと画像スライダーが組み合わさってます。
スクロールするとじんわり画像が変わります。

See the Pen webgl water effect + images slider by Stranger in the Q (@strangerintheq) on CodePen.light

Aquarelle Animation

煙っぽくもあるような気がしなくもないですが、一応水っぽいということで！

See the Pen Aquarelle Animation by leusrox (@leusrox) on CodePen.light

CSS Water colour text effect

文字が水彩っぽくなります

See the Pen CSS Water colour text effect by Jayden Pearse (@spartanatreyu) on CodePen.light