Grow your CSS skills. Land your dream job.

Need help adding touch response to an older javascript :ripple.js

  • # August 6, 2012 at 4:00 pm

    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

Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".