I found a script that works great for creating a water ripple over a logo.
Here is the script: http://js1k.com/2010-first/demo/131
Here is where I’m using it: http://www.mccarthymodels.co.jp/
With a simple movement of the mouse over the logo.. I get a nice water ripple disturbance. On an iPad or a phone.. all I get is ripple if I tap. Not on mousemove. I tried adding jQuery Mobile (1.2 alpha) and feeding the vmousemove.. but I’m not sure how.
This is the part of the ripple script that gets the mouse:
canvas.addEventListener('mousemove', function(/* Event */ evt) {
disturb(evt.offsetX || evt.layerX, evt.offsetY || evt.layerY);
}, false);
Note: ripple.js needs the mouse position relative to the offset parent, not the page or window.
So.. I would like to get the ripple.js to respond to a finger move the same as a mouse hover over the ripple area.. creating a smooth trail.
solutions would be great.. I’d be happy with being pointed to some good examples.
-Thanks