Get a free trial // 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:
    Here is where I’m using it:
    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.


Viewing 1 post (of 1 total)

You must be logged in to reply to this topic.

There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed