A Water ripple effect... that works? ...on webflow

Design help Custom code
1

Hey there!!
I’ve been reading up on and attempting a “Water Ripple Effect” on my site… where the curser splashes around a background image… and well, all the instructions, videos and pages that I’ve found… and attempted to try… don’t seem to work. I use to have it on one of my old sites (WAY back in 2002), but that was using html… and I forget how I did it.

I also found a video with this guy saying how he did it in webflow and how easy it is, but when you go to his site… it’s just a blank white screen. which is something I’m trying to avoid… duh.

I have a product coming out soon, that involves water… and I believe that this effect would be perfect for what I’m doing…

If anyone could assist, or point me in the right direction (as I may be overthinking how this is done)… I would greatly appreciate it.

Thanks!
-Steve

Here is my site Read-Only: LINK
(how to share your site Read-Only link)

2

Hi Steven,

there is a cloneable project for this effect:

https://webflow.com/website/js-ripple-effect?s=js-ripple-effect

Take a look at the custom code used there.

Hope it helps.

3

I checked out the site, and the background images seem to appear… then vanish. that’s exactly what I don’t want to happen. It then appears as a completely white screen, with nothing…

4

one of the remarks also claims that it doesn’t work.

5

I just tried the script above on a scratch page and it works in the three different browsers I checked it out with (Chrome, Firefox, Safari). Only thing is that the effect looks quite a bit different across each browser.

6

Here’s a screenshot… See that there’s no scuba pic. When I go to open Live Website… It’s completely blank. Polar Bear in Snow Storm, blank. I’ve used Firefox, Chrome, and Safari…