interaction with touch on mobile

[archimedo]

Hi everyone, I've used this library achieving wonderful results on a website.
I'd like to apply the interactive feature of the effect on a mobile touchscreen, basically I'd like to have the desktop mousemove effect when user touch and move the finger around the image.
Is that possible? how can I do that?
Thank you very much

[realmichaelye]

@sirxemic +1^ Also there's a bug with mobile/iOS where when I click on the screen it renders an overlay

[sirxemic]

@archimedo That's already possible by setting interactive: true. When I visit https://sirxemic.github.io/jquery.ripples/ on my iPhone I can get the effect by simply moving my finger over the background. But maybe in your case it's not working because some other element is blocking the interaction? In that case you could do something like this (untested, but it should work, I think)

const ripplesElement = $('.some-selector').ripples({ /* some config */ })
$('body')
    .on('mousemove.ripples', (e) => {
        ripplesElement.ripples('dropAtPointer', e, 20, 0.01);
    })
    .on('touchmove.ripples touchstart.ripples', (e) => {
        for (const touch of e.originalEvent.changedTouches) {
            ripplesElement.ripples('dropAtPointer', touch, 20, 0.01)
        }
    })

@realmichaelye Check out this thread on Stack Overflow