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.
Self-hosted analytics
This is most impressive. Jquery, HTML and CSS are the gateway for good content websites on the page.
ReplyDeletewow 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!
ReplyDeleteThis post is more than 2 years old, at that date canvas wasn't as known as it is today.
DeleteThis 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 :)
the link is now broken. CAn you give a new link to that project?
DeleteInteresting jQuery script!
ReplyDelete