Javascript water effect

Hello,

I have a hobby project coming up and it involves lots of beautiful photos of sunsets and cityscapes with water in them.

I would love to gently make the water ripple as if you are standing there looking at the view.

I found this one but it is more rain drops and not a standard gentle waving.
http://code.almeros.com/code-examples/water-effect-canvas/#.U0NqGcdHggA

Imagine you are sitting on a dock looking out and you can see the trees in the back still as could be but the water has a movement to it... that is what I am looking for.

Thank you for any help.

Matt
LVL 1
movieprodwAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
Advertise Here
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
I just stumbled on this three.js for something else. A quick search and there is a wave http://threejs.org/examples/#canvas_particles_waves but looks like you have to do some work.   Another example using three.js http://stemkoski.github.io/Three.js/Shader-Animate.html

Another option is using a loop of water from b-roll or created animation.  There are plenty of stock photo/video for this type of thing http://www.motionelements.com/stock-video-2818894-wavy-water-effect-looping
0
 
movieprodwAuthor Commented:
I am looking for more of a ripple then a rain drop, it is hard to find I guess
0
 
movieprodwAuthor Commented:
0
Keep up with what's happening at Experts Exchange!

Sign up to receive Decoded, a new monthly digest with product updates, feature release info, continuing education opportunities, and more.

Sign Up
 
Scott Fell, EE MVEConnect With a Mentor Developer & EE ModeratorCommented:
That looks perfect.  Use that as your background.  Use the "Big Web" though, you will not need the HD.  Then run that full screen in the background.
0
 
movieprodwAuthor Commented:
Hello,

I got this effect by layering a png on top of the jquery script but I need the jquery script to be 100% height, currently it is only doing 50%

http://69.64.82.8/
0
 
movieprodwAuthor Commented:
Thanks for trying
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.