| Category: JavaScript / Animations |
| Watchers: 2 |
| Star: 8 |
| Fork: 3 |
| Last update: Dec 8, 2023 |
##Canvas-based ripple effect
JQuery plugin that places a ripple effect over an image.
HTML:
<img id="target" src="http://lorempixel.com/600/450/">
JS:
$(function() {
$("#target").ripple();
});
See demo.html.
Assume user knew what they were doing when they chose that image, and that image displays fine without ripple effect.
A better end-user experience would be to not display an error message and to hide the canvas so that the original image hidden behind it shows.
Even if the original image doesn't display properly, at least the ripple module cannot be blamed for displaying a blank canvas, since it will be the original image that will be blank! :)
Great module, BTW!!!
Parameterize things like:
It seems that the top and left borders are not returning to normal. This could indicate some loop is not starting at 0?
Results can be seen here: www.standingrock.org (top left logo).
