You can call it on anything you like Charles, I have it called when the mouse hovers over a trigger. You can change this to anything you like. You can have it flow all day long if you want but you’d have to change the function so it doesn’t degrade.
Hi, nicely done. I’ve been having fun with this and got a bit stuck, I am trying to change it to a timer based event, not on mouse hover. Any hints on how to remove the hover?
@Ben: Haven’t looked at this source code in awhile, but what you’re proposing shouldn’t be too difficult. The script uses the x value of the mouse cursor to define the centerpoint of the wave, my guess is that’s where you’re stuck, as you’ll need to hard code that value or come up with it somewhere else. Good luck!
Thanks John, that was where I was stuck. I have changed the midPointX to a changing random value (within the page width) and it’s working great, it appears as a almost continuous ripple. The is only a very short moment of flat line as the ripple restarts.
Hey John,
This is a great tutorial!
I’m trying to make the wave move on their on with no hover, something like an animation can you help me on that? I’m not that great with this
If you’re trying to animate that particular image then this tutorial won’t help you much. Your best bet using a version of my code would be to create multiple overlayed waves and try to achieve a more photo realistic effect, as in your image. Otherwise you’re better off looking for code that will create a ripple effect on a bitmap, which I’m sure you can find with a google search. Good luck.
I'm a drawing of John Pezzetti, a web and graphics guy located in San Diego, CA.
This is my personal blog where I write primarily about building websites, design and illustration. If you're looking for someone who does such things then you should head on over to my company's website: Other Half Full.
If you want to get in touch then go ahead and contact me.
Mercenary for Hire
To check out my design & web work please head over to my company: Other Half Full, Inc..
Hey, take i look what i did http://beerblogging.org/ =]
Nice application Zeno!
Backlinks are always appreciated =) —
Need to modify it some more but its nice
Have any good ideas on how to make it twitch on it own?
You can call it on anything you like Charles, I have it called when the mouse hovers over a trigger. You can change this to anything you like. You can have it flow all day long if you want but you’d have to change the function so it doesn’t degrade.
Awesome! Keep up the good work.
HI it’s great your work. Is possible the same effect with jquery only ? without HTML
… without Html5
While I’m sure it could be done with jQuery alone it would be pretty damn messy…this code relies upon the HTML5 Canvas element.
Has anyone tried to make the water level vertical? I tried but to no avail…
@adm351: Doable, but it will take some work on your part. Good luck, let me know how it goes.
Hi, nicely done. I’ve been having fun with this and got a bit stuck, I am trying to change it to a timer based event, not on mouse hover. Any hints on how to remove the hover?
@Ben: Haven’t looked at this source code in awhile, but what you’re proposing shouldn’t be too difficult. The script uses the x value of the mouse cursor to define the centerpoint of the wave, my guess is that’s where you’re stuck, as you’ll need to hard code that value or come up with it somewhere else. Good luck!
Thanks John, that was where I was stuck. I have changed the midPointX to a changing random value (within the page width) and it’s working great, it appears as a almost continuous ripple. The is only a very short moment of flat line as the ripple restarts.
Hey John,
This is a great tutorial!
I’m trying to make the wave move on their on with no hover, something like an animation can you help me on that? I’m not that great with this
Hello, so cool this effect 😉
I try to add an image in the bottom the wave, (this image: http://shinyuufansub.com.br/felipehs/agua2.png), but I don’t have any idea how I can to do it.
Can u help me?
Hi Felipe,
If you’re trying to animate that particular image then this tutorial won’t help you much. Your best bet using a version of my code would be to create multiple overlayed waves and try to achieve a more photo realistic effect, as in your image. Otherwise you’re better off looking for code that will create a ripple effect on a bitmap, which I’m sure you can find with a google search. Good luck.
points[(midPointIndex-pt)+midPointIndex] lol points[-pt]