search

sirxemic / jquery.ripples

Add a water ripple effect to your background using WebGL.
https://sirxemic.github.io/jquery.ripples/
MIT License
1.06k stars 417 forks source link

interaction with touch on mobile #77

Open archimedo opened 3 years ago

archimedo commented 3 years ago

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 commented 3 years ago

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

sirxemic commented 3 years ago

@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