Tuesday, June 21, 2011

[JQ] jQuery + CSS water simulation

I have created yet another jQuery script, after the share widget and the particles system. This time I tried to develop a water simulator using only HTML, CSS and jQuery.
Click HERE for the demo.
Simply move your mouse over the water to make it move.
Be aware that the largets quality (12*120) takes some time to load and my crash your browser if you don't have good PC specs.
Feel free to look through the source code :).

Quick explanation on how I've made the script:
I use a container div to hold everything together and inside it I've inserted using jQuery some small-width divs that have a mouseover effect. When you hover a div it get's bigger in height and when you take your mouse out it gets to the original size. I've also used easing to obtain a more realistic effect.


  1. This is most impressive. Jquery, HTML and CSS are the gateway for good content websites on the page.

  2. wow this is actually terrible, bad quality even on "high amplitude" and the reason why it "might crash your browser" is because you're using too many DIVs !! You only need 1 canvas to do a water animation, which will be a lot more realistic than this. Learn your tools!

    1. This post is more than 2 years old, at that date canvas wasn't as known as it is today.

      This was more of a "what can you draw using only HTML elements and CSS3" demo. Also, this idea can be used to create UI elements and animated buttons, which if you are a webdesign, you should know that UI elements should never be canvases. :)

      If you have a working canvas example of water simulation which can be done in a few linesof code feel free to post it here :)

    2. the link is now broken. CAn you give a new link to that project?