Menu
A client has asked me to apply a similar water ripple effect to the background image (and only the background image) on their website.
Considering that this is using a canvas, it doesn't seem possible. Is anyone aware of an effect like this that I can apply to just the background image on a page?
423
Water molecules will encounter an object and move upwards against it, before being pulled back down by the neighboring molecules. This interaction causes a ripple to form that moves in the opposite direction of the water's initial motion.
A ripple effect occurs when an initial disturbance to a system propagates outward to disturb an increasingly larger portion of the system, like ripples expanding across the water when an object is dropped into it.
Picture yourself on the shore of a lake or a pond, and you cast a stone into the water. You see it enter the water and disappear, leaving behind a bounty of ripples that seemingly spread out for miles.
For UI components like buttons or links that users can interact with by click or touch, the ripple effect is one micro-interactions that can be used to provide feedback, helping users understand they just interacted with a component.
For a high performance, WebGL powered solution, take a look at this project:
jQuery WebGL Ripples
A demo is available here.
This technology is not available for everyone in every device yet, though.
73
Have a look on these 2 demos, which i think you can get based to create yours.
29a.ch and mrdoob
Hope this helps
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
